css制作圆球

使用 border-radius 制作圆球

通过设置 border-radius: 50% 可以将一个正方形元素变为圆形。结合 width 和 height 调整大小。

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

添加渐变或阴影增强立体感

使用 box-shadow 或 background 的径向渐变（radial-gradient）让圆球更具立体效果。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff0000, #cc0000);
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

实现动态效果（如悬浮动画）

通过 transition 或 animation 让圆球产生交互或动态效果。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
  transition: transform 0.3s ease;
}

.ball:hover {
  transform: scale(1.1);
}

使用伪元素添加高光

通过 ::before 或 ::after 伪元素模拟高光，增强真实感。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
  position: relative;
}

.ball::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

响应式圆球

通过百分比或 vw/vh 单位实现自适应大小的圆球。

.ball {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background-color: #ff0000;
}