css制作圆形教程
使用 border-radius 属性制作圆形
通过将元素的 border-radius 设置为 50%，可以将正方形元素变为圆形。需要确保元素的宽度和高度相等。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
}通过 clip-path 创建圆形
clip-path 属性允许使用 circle() 函数直接裁剪出圆形区域，适用于非正方形元素。
.circle {
width: 150px;
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="40" fill="#2ecc71" />
</svg>通过伪元素生成圆形
利用 ::before 或 ::after 伪元素生成圆形，适合动态内容或装饰性元素。
.element::before {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f39c12;
}圆形边框与渐变效果
结合 border 和渐变背景，可以创建带边框或复杂样式的圆形。
.gradient-circle {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #9b59b6;
background: linear-gradient(to right, #1abc9c, #3498db);
}
