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;
}使用伪元素生成圆形
通过伪元素（如 ::before 或 ::after）结合 border-radius 实现圆形，适合动态内容或装饰性元素。
.element::before {
content: "";
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #2ecc71;
}使用 SVG 绘制圆形
SVG 的 <circle> 标签专门用于绘制圆形，适合矢量图形或需要缩放的情况。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#9b59b6" />
</svg>使用 radial-gradient 背景
通过 CSS 的径向渐变模拟圆形效果，适合纯色或渐变背景的圆形。
.circle {
width: 80px;
height: 80px;
background: radial-gradient(circle, #f1c40f 50%, transparent 50%);
}注意事项
- 确保元素的
width和height值相同，否则border-radius: 50%会生成椭圆形。 - SVG 方法适合需要保留矢量特性的场景，而 CSS 方法更适用于常规布局。
clip-path的兼容性较低，需检查目标浏览器支持情况。
