Css 具有透明背景的边界半径渐变

我有一个简单的CSS微调器，如下所示：

html{
背景：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
@关键帧k__公共旋转cw{
0% {
变换：旋转（0）；
}
100% {
变换：旋转（360度）；
}
}
.wd旋转器{
高度：30px；
宽度：30px；
边框样式：实心；
边框颜色：rgba（255、255、255、0.15）；
边框宽度：2倍；
边界半径：100%；
边框顶部颜色：#00ba8c；
-webkit动画：k__common-spin-cw 700ms线性无限；
动画：k__公共自旋连续波700ms线性无限；
}

---

我已经删除了动画并增加了大小，以使效果更容易看到

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

将鼠标悬停在div上，将应用溢出隐藏，设置最终效果

html{
背景：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.wd旋转器{
高度：200px；
宽度：200px；
边界半径：100%；
位置：相对位置；
}
.wd微调器：悬停{
溢出：隐藏；
}
.wd微调器：之后{
内容：“；
位置：绝对位置；
高度：196px；
宽度：196px；
边框样式：实心；
边框颜色：rgba（255、255、255、0.15）；
边框宽度：2倍；
边界半径：100%；
边框顶部颜色：#00ba8c；
}
.wd微调器：之前{
内容：“；
位置：绝对位置；
高度：196px；
宽度：196px；
顶部：2个；
左：2px；
边界半径：100%；
盒影：-40px-40px 70px-22px#00ba8c；
}

---

这真是太棒了，但有没有办法让它保持快速响应？我希望能够轻松地更改微调器的大小。不幸的是，只有在需要完全浏览器支持的情况下，才能使用box shadow实现这一点，而box shadow不支持百分比。您可能的解决方法是：1）在em中指定长度并更改字体大小2）在变换中应用比例