当前位置：首页 > CSS

css制作圆球

2026-01-28 07:56:46CSS

使用 `border-radius` 属性

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

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

使用 `aspect-ratio` 保持比例

若需动态调整圆球大小，可通过 aspect-ratio: 1 保持宽高比为 1:1，避免手动设置高度。

.ball {
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(to bottom, blue, cyan);
}

添加阴影和光泽效果

通过 box-shadow 和伪元素模拟立体感，增强视觉效果。

.ball {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, white, gold);
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}
.ball::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

使用 SVG 替代 CSS

对于复杂效果（如渐变或动画），SVG 可能更高效。

css制作圆球

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="url(#gradient)" />
  <defs>
    <radialGradient id="gradient" cx="30%" cy="30%" r="70%">
      <stop offset="0%" stop-color="lightgreen" />
      <stop offset="100%" stop-color="darkgreen" />
    </radialGradient>
  </defs>
</svg>