css制作球体

使用CSS制作球体

方法一：纯CSS圆形与阴影结合

通过border-radius和box-shadow实现基础球体效果：

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

关键点：

• border-radius: 50%创建正圆形
• radial-gradient模拟光源照射效果
• inset box-shadow添加内阴影增强立体感

方法二：3D变换与动画

结合transform实现动态球体：

.sphere {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00bcd4, #3f51b5);
  transform: rotateX(15deg) rotateY(15deg);
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.2),
    inset 0 -15px 30px rgba(0,0,0,0.4);
}

方法三：CSS变量控制参数

使用CSS变量方便调整球体属性：

:root {
  --sphere-size: 120px;
  --sphere-color: #ff9800;
}

.sphere {
  width: var(--sphere-size);
  height: var(--sphere-size);
  border-radius: 50%;
  background: 
    radial-gradient(
      circle at 25% 25%,
      rgba(255,255,255,0.8),
      var(--sphere-color)
    );
}

进阶技巧：反光效果

添加伪元素模拟高光：

.highlight-sphere {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #4caf50;
}

.highlight-sphere::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}

注意事项

• 不同浏览器对radial-gradient的渲染可能有差异
• 移动端需考虑-webkit-前缀兼容性
• 复杂场景建议结合SVG或Canvas实现更精细效果