css制作球形

使用CSS制作球形

使用CSS的border-radius属性可以轻松创建球形效果。以下是几种实现方法：

基础球形

通过设置border-radius: 50%将正方形元素变为圆形，再添加渐变或阴影增强立体感：

.sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #00aaff);
  box-shadow: inset 10px 10px 20px rgba(0,0,0,0.2);
}

3D球形效果

结合CSS渐变和阴影模拟光照效果：

.ball {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, 
    #ffffff, #ff0000 50%, #800000 70%);
  box-shadow: 
    inset -10px -10px 30px rgba(0,0,0,0.5),
    5px 5px 15px rgba(0,0,0,0.3);
}

动画球形

添加CSS动画让球形旋转或脉动：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-sphere {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9a9e, #fad0c4);
  animation: pulse 2s infinite;
}

复杂渐变球形

使用多重渐变创造更真实的材质感：

.glass-sphere {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, 
      rgba(255,255,255,0.8) 0%,
      rgba(255,255,255,0.2) 50%,
      transparent 70%),
    linear-gradient(135deg, 
      rgba(100,200,255,0.8) 0%,
      rgba(0,50,150,0.8) 100%);
  box-shadow: 0 10px 30px rgba(0,100,200,0.3);
}

注意事项

• 确保元素的width和height相等
• 使用radial-gradient模拟光源反射效果
• 通过box-shadow的inset参数创造凹陷阴影
• 调整渐变中心点位置改变高光位置
• 结合transform属性可实现3D旋转效果

以上方法可根据需要组合使用，通过调整颜色、渐变位置和阴影参数可获得不同风格的球形效果。