css 制作圆形

使用 border-radius 属性

通过将元素的 border-radius 设置为 50%，可以将正方形或长方形元素变为圆形。

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

• 确保 width 和 height 值相同，否则会生成椭圆形。

使用 aspect-ratio 保持比例

若希望圆形动态适应内容，可通过 aspect-ratio: 1/1 强制宽高比为 1:1。

.dynamic-circle {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #e74c3c;
}

通过伪元素创建圆形

利用 ::before 或 ::after 伪元素生成圆形，无需额外 HTML 标签。

.element::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #2ecc71;
}

圆形边框与阴影

为圆形添加边框和阴影效果，增强视觉层次。

.fancy-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f1c40f;
  border: 3px solid #e67e22;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

响应式圆形

结合百分比单位或 vw/vh 单位实现响应式圆形。

.responsive-circle {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #9b59b6;
}