当前位置：首页 > CSS

css 制作球体

2026-02-27 08:52:37CSS

使用 CSS 制作球体

使用 `border-radius` 创建圆形

通过将 border-radius 设置为 50%，可以将一个正方形元素变为圆形。结合 width 和 height 调整大小，并添加背景色或渐变效果。

.sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5e5e, #d10000);
}

添加阴影增强立体感

使用 box-shadow 或内阴影 (inset) 模拟光源效果，增强球体的立体感。调整阴影的偏移和模糊程度以匹配光源方向。

.sphere {
  box-shadow: inset -20px -20px 30px rgba(0, 0, 0, 0.3), 
              10px 10px 20px rgba(0, 0, 0, 0.2);
}

使用 CSS 渐变模拟光照

通过 radial-gradient 创建从亮部到暗部的渐变，模拟球体的高光和阴影区域。调整渐变的中心点位置以匹配光源方向。

.sphere {
  background: radial-gradient(circle at 30% 30%, 
              #ffffff 10%, 
              #ff3333 40%, 
              #b30000 90%);
}

添加动画效果（可选）

通过 CSS 动画让球体旋转或浮动，增强动态视觉效果。使用 @keyframes 定义动画序列。

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sphere {
  animation: rotate 8s infinite linear;
}

示例完整代码

以下是一个完整的 CSS 球体实现示例：

css 制作球体

<div class="sphere"></div>

<style>
  .sphere {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
                #ffffff 10%, 
                #ff3333 40%, 
                #b30000 90%);
    box-shadow: inset -20px -20px 30px rgba(0, 0, 0, 0.3), 
                10px 10px 20px rgba(0, 0, 0, 0.2);
    animation: rotate 8s infinite linear;
  }
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>