css制作圆心
使用 border-radius 创建圆形
将元素的 width 和 height 设置为相同的值，并将 border-radius 设为 50%。这会强制元素呈现圆形。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
}使用 aspect-ratio 保持比例
通过 aspect-ratio: 1 确保宽高比为 1:1，结合 border-radius: 50% 实现圆形。
.circle {
width: 100px;
aspect-ratio: 1;
border-radius: 50%;
background-color: #e74c3c;
}使用伪元素创建动态圆形
通过伪元素（如 ::before 或 ::after）生成圆形，适合动态内容或装饰性元素。
.element::before {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #2ecc71;
}结合 clip-path 精确裁剪
使用 clip-path 的 circle() 函数直接定义圆形区域，适合复杂形状组合。
.circle {
width: 120px;
height: 120px;
clip-path: circle(50% at 50% 50%);
background-color: #9b59b6;
}响应式圆形设计
通过 vw 或 % 单位实现圆形随视口大小变化。
.circle {
width: 20vw;
height: 20vw;
border-radius: 50%;
background-color: #f1c40f;
}使用 SVG 创建圆形
通过内联 SVG 实现矢量圆形，适合需要缩放或动画的场景。
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#1abc9c" />
</svg>圆形边框效果
通过 border 属性添加环形边框，结合透明背景。
.circle-border {
width: 80px;
height: 80px;
border-radius: 50%;
border: 5px solid #e67e22;
background-color: transparent;
}渐变填充圆形
使用 radial-gradient 背景创建渐变填充的圆形。
.gradient-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, #3498db, #2980b9);
}
