css渐变绘制立体球 |css btn

.ball {
width: 200px;
height: 200px;
background: radial-gradient(circle, #fff 20%, #888 60%, #000);
border-radius: 50%;
box-shadow: inset 0 0 50px #ddd, 0 0 50px rgba(0,0,0,.7);
}

首先，大家定义了一个名为“ball”的CSS类。然后，大家设置了宽度和高度为200像素，以及较深的背景色。接下来，大家使用了径向渐变来添加一个浅色的部分，这将成为球体的高光。渐变的前20%是白色，接下来60%是深灰色，然后是黑色。最后，大家将边框半径设置为50%，使球体看起来更真实。

大家还使用了一些阴影技巧，来增加球体的立体感。首先，大家向球体内部添加了一个深灰色的投影，然后又添加了一个黑色的外部投影。这种效果让球仿佛浮现在页面上。

总的来说，CSS渐变是一项非常强大的技术，它可以让大家创建出令人惊叹的效果。如果你自己动手尝试一下，你会发现自己能够用到这些技术来创建出更精美、更有趣的网页。