css制作圆孔
使用 border-radius 属性
通过将元素的 border-radius 设置为 50%，可以将正方形或长方形元素变为圆形。例如，创建一个宽高相等的元素并设置圆角：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
}使用 clip-path 属性
clip-path 可以通过 circle() 函数直接裁剪出圆形区域。这种方法适用于非正方形元素：
.circle {
width: 100px;
height: 150px;
clip-path: circle(50% at 50% 50%);
background-color: #e74c3c;
}使用 SVG 实现圆孔
通过内联 SVG 的 <circle> 元素，可以更灵活地控制圆的样式和位置：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#2ecc71" />
</svg>使用伪元素创建空心圆
通过伪元素和 border 属性，可以制作空心圆（圆环）：
.hollow-circle {
width: 100px;
height: 100px;
position: relative;
}
.hollow-circle::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 5px solid #9b59b6;
border-radius: 50%;
}使用 radial-gradient 背景
通过 CSS 的渐变背景模拟圆孔效果，适合背景透明的场景：
.gradient-circle {
width: 100px;
height: 100px;
background: radial-gradient(circle, #f1c40f 60%, transparent 60%);
}
