css制作圆孔

使用 border-radius 创建圆形

通过将元素的 border-radius 设置为 50%，可以将方形元素转变为圆形。需要确保元素的宽度和高度相等。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

使用 clip-path 创建圆孔

clip-path 属性可以通过裁剪元素来创建圆孔效果。使用 circle() 函数定义圆形裁剪区域。

.hole {
  width: 200px;
  height: 200px;
  background-color: #2ecc71;
  clip-path: circle(50px at center);
}

使用伪元素叠加创建圆孔

通过伪元素（如 ::before 或 ::after）在元素上叠加一个圆形，模拟圆孔效果。需要设置伪元素的背景色与父元素背景色一致。

.parent {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #e74c3c;
}

.parent::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: white;
}

使用 SVG 创建圆孔

SVG 的 <circle> 元素可以精确绘制圆形或圆孔，适合需要复杂图形的情况。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#9b59b6" />
</svg>

使用 box-shadow 创建镂空圆孔

通过 box-shadow 的 inset 属性在元素内部创建阴影，模拟圆孔镂空效果。

.shadow-hole {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px #1abc9c;
}