精巧裁切圆环，透明缺口随心驾驭
在网页设计中，圆环经常被用于展示进度或数据。然而，有时我们需要在圆环上创建缺口，这就需要一点技巧了。
圆环裁切方案
方案一：CSS 巧妙裁剪
如果圆环的缺口角度为 90 度，我们可以使用 CSS 轻松实现：
.pie {
border: 1px solid white;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 50%;
width: 100px;
height: 100px;
}对于非 90 度的缺口，我们可以使用 CSS 叠层和 clip-path() 函数，但需要注意底色的复杂性。
方案二：锥形渐变与径向渐变搭配
该方案使用 conic-gradient 锥形渐变绘制圆环，结合 mask 使用 radial-gradient 径向渐变遮盖缺口：
.pie {
mask: radial-gradient(circle, white 1px, transparent 3px, transparent 100%);
background: conic-gradient(white 0% 7%, #ccc 7% 93%);
} 
