用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 {
aspect-ratio: 1;
border-radius: 50%;
background-color: #e74c3c;
padding: 20px; /* 内容内边距 */
}使用 SVG 绘制圆形
SVG 提供原生圆形绘制能力，适合需要复杂图形或动画的场景。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#2ecc71" />
</svg>使用伪元素创建圆形
通过伪元素（如 ::before 或 ::after）生成圆形，无需额外 HTML 标签。
.element::before {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f39c12;
}圆形边框与渐变
为圆形添加边框或渐变效果，增强视觉表现。
.gradient-circle {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #333;
background: linear-gradient(45deg, #9b59b6, #1abc9c);
}响应式圆形
通过百分比单位或 vw/vh 单位实现圆形随容器或视口大小变化。
.responsive-circle {
width: 20vw;
height: 20vw;
max-width: 200px;
max-height: 200px;
border-radius: 50%;
background-color: #34495e;
}
