css制作圆形
使用 border-radius 属性制作圆形
通过设置 border-radius: 50% 可以将元素变为圆形。该属性会将元素的四个角设置为半径值为元素宽度一半的圆角，从而形成圆形。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
}使用 aspect-ratio 保持宽高比
若希望圆形在不同尺寸下保持比例，可以使用 aspect-ratio: 1 确保宽高比为 1:1。
.circle {
width: 100px;
aspect-ratio: 1;
border-radius: 50%;
background-color: #e74c3c;
}使用 clip-path 创建圆形
clip-path 可以通过 circle() 函数直接裁剪出圆形区域，适合复杂形状的裁剪需求。
.circle {
width: 100px;
height: 100px;
clip-path: circle(50% at 50% 50%);
background-color: #2ecc71;
}使用 SVG 绘制圆形
SVG 的 <circle> 元素专为绘制圆形设计，适合需要矢量图形的场景。
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#9b59b6" />
</svg>响应式圆形设计
通过 vw 或 % 单位实现圆形随视口或容器大小变化。
.circle {
width: 20vw;
height: 20vw;
border-radius: 50%;
background-color: #f1c40f;
}圆形边框效果
为圆形添加边框时需注意 box-sizing，避免边框导致尺寸溢出。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #e67e22;
box-sizing: border-box;
}
