这个问题在这里已有答案：
首先，抱歉这个非常具体的问题。我在CSS上并不擅长，我需要一个代码帮助。
我想让内圈透明，而不会失去边框的渐变效果。我该怎么做？
我有这个旋转加载器（参见代码片段）
.spin-loader {
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
position: relative;
animation: spin .675s linear 0s infinite normal;
background: #5090bd;
margin-top: 18px;
margin-left: 205px;
}
.spin-loader:before {
content: "";
display: block;
position: absolute;
border-radius: 0 90px 90px 0;
height: 20px;
width: 50%;
top: 0; right: 0;
z-index: 1;
background: #405060;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5090bd), to(#405060));
background-image: -webkit-linear-gradient(top, #5090bd, #405060);
background-image: -moz-linear-gradient(top, #5090bd, #405060);
background-image: -ms-linear-gradient(top, #5090bd, #405060);
background-image: -o-linear-gradient(top, #5090bd, #405060);
background-image: linear-gradient(to bottom, #5090bd, #405060);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5090bd, endColorstr=#405060);
}
.spin-loader:after {
content: "";
display: block;
position: absolute;
border-radius: 80%;
height: 16px;
width: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: #405060;
}
/* Safari */
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<body>
<div class="spin-loader"></div>
</body>
</html>谢谢！
你不能让这个旋转加载器透明，因为有一些技巧可以降低旋转条纹的不透明度，如果没有完全覆盖这个带有背景的加载器就无法完成。您可以尝试查看删除或更改background的.spin-loader:after时会发生什么。