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: 100px;
clip-path: circle(50% at 50% 50%);
background-color: #e74c3c;
}使用伪元素和 transform
通过伪元素和 transform: scale() 实现动态圆孔效果。
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: #2ecc71;
}
.parent::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%);
}使用 SVG 内联
直接在 HTML 中嵌入 SVG 圆形，适用于需要复杂交互的场景。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#9b59b6" />
</svg>注意事项
- 确保圆孔的父元素有明确的尺寸或定位上下文（如
position: relative）。 - 使用
box-shadow或filter: drop-shadow()可为圆孔添加投影效果。 - 若需镂空效果（如背景透出），结合
background或mix-blend-mode属性调整。
