css 制作球体
使用 CSS 制作球体的方法
使用 border-radius 创建圆形
通过设置 border-radius: 50% 可以将一个正方形元素转换为圆形。结合 width 和 height 定义球体大小，并使用 background 填充颜色。
.sphere {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to bottom, #ff0000, #990000);
}添加阴影增强立体感
通过 box-shadow 或内阴影模拟光照效果，使球体看起来更立体。外阴影可以模拟环境光，内阴影可以模拟凹陷或高光。
.sphere {
box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.5),
inset 10px 10px 20px rgba(255, 255, 255, 0.3);
}使用渐变模拟光照
线性渐变或径向渐变可以模拟光源方向。例如，从左上角到右下角的渐变可以表现斜向光照。
.sphere {
background: radial-gradient(circle at 30% 30%, #ffffff, #ff0000);
}添加动画效果（可选）
通过 CSS 动画让球体旋转或浮动，增强动态感。使用 @keyframes 定义动画关键帧。
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.sphere {
animation: rotate 5s infinite linear;
}示例完整代码
以下是一个完整的球体实现代码，包含圆形、渐变和阴影：
<div class="sphere"></div>
<style>
.sphere {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff, #ff0000);
box-shadow: inset -15px -15px 30px rgba(0, 0, 0, 0.4),
inset 15px 15px 30px rgba(255, 255, 255, 0.2);
}
</style>进阶技巧：3D 变换
通过 transform 属性实现更复杂的 3D 效果。例如，结合 perspective 和 rotateX/rotateY 模拟三维空间。
.container {
perspective: 500px;
}
.sphere {
transform: rotateX(20deg) rotateY(20deg);
}
