html - 在下面的场景中，如何使用 CSS 将纯色变为透明？

Question

我在这个站点“http://projects.lukehaas.me/css-loaders/”中使用微调器。第一排第三个。当我在圆圈中心应用到我的系统时，它会显示纯色。我想让它透明。但如果我这样做的话，白色圆圈会变成错误的。我想要的是透明圆环中间的纯色背景并隐藏其中的颜色。有人可以帮我吗？非常感谢。

Answer 1

这里有半个 donut ，一侧逐渐变透明

body {
    background-color: lightblue;
}
.test {
    width: 240px;
    height: 240px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
}

.test:before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    left: 0px;
    border: solid 40px red;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
   
}

.test:after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    left: 40px;
    top: 40px;
    border-radius: 50%;
    box-shadow: 118px 30px 120px 40px red;
}

<div class="test"></div>

基本元素仅用于裁剪成一个圆。

然后伪元素给出实心半圆，使用边框。

另一个伪元素使用阴影使褪色变成红色。对于这种设置，阴影被设置它的元素裁剪是非常方便的。因此，如果此元素具有内圆的大小，则阴影会被两个圆剪切