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;
}使用 SVG 绘制圆形
通过内联 SVG 的 <circle> 元素实现，适合需要复杂图形控制的场景。
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#2ecc71" />
</svg>使用伪元素创建圆形
通过 ::before 或 ::after 伪元素生成圆形，适合装饰性元素。
.element::before {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f39c12;
}注意事项
- 使用
border-radius: 50%时，需确保元素为正方形，否则会显示为椭圆。 clip-path的兼容性较新，需检查目标浏览器支持情况。- SVG 方案适合需要动态修改或动画的场景。
