与透明背景

Question

边界半径梯度我有这个简单的CSS微调，在这里：

html { 
 
    background: black; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 

 
@keyframes k__common-spin-cw { 
 
    0% { 
 
    transform: rotate(0); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
.wd-spinner { 
 
    height: 30px; 
 
    width: 30px; 
 
    border-style: solid; 
 
    border-color: rgba(255, 255, 255, 0.15); 
 
    border-width: 2px; 
 
    border-radius: 100%; 
 
    border-top-color: #00ba8c; 
 
    -webkit-animation: k__common-spin-cw 700ms linear infinite; 
 
    animation: k__common-spin-cw 700ms linear infinite; 
 
}

<div class="wd-spinner"></div>

是否有可能与边界半径渐变边框，而不是具有突出显示的border-top的尾部突然结束，使其渐变渐变渐变，同时保持背景透明？

Answer 1

我已经删除了动画并增加了尺寸以使效果更易于看到。

使用伪，我添加了一个与边界相同颜色的阴影来创建淡入淡出效果。

上div和隐藏的溢出哈弗将被应用，设置最后的效果

html { 
 
    background: black; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 
.wd-spinner { 
 
    height: 200px; 
 
    width: 200px; 
 
    border-radius: 100%; 
 
    position: relative; 
 
} 
 
.wd-spinner:hover { 
 
    overflow: hidden; 
 
} 
 
.wd-spinner:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 196px; 
 
    width: 196px; 
 
    border-style: solid; 
 
    border-color: rgba(255, 255, 255, 0.15); 
 
    border-width: 2px; 
 
    border-radius: 100%; 
 
    border-top-color: #00ba8c; 
 
} 
 
.wd-spinner:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 196px; 
 
    width: 196px; 
 
    top: 2px; 
 
    left: 2px; 
 
    border-radius: 100%; 
 
    box-shadow: -40px -40px 70px -22px #00ba8c; 
 
}

<div class="wd-spinner"></div>