CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用 CSS3 渐变和阴影特性来实现，实现方法简单，效果精美。
为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
基本形状
我们先来实现一个基本的圆，HTML 代码如下：
径向渐变
上面实现了基本的圆形效果，这里增加径向渐变效果来实现更逼真的球体。
代码如下：
阴影和 3D
上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。
这里用到了 CSS3 perspective 特性，效果如下：
多层阴影
为了实现更逼真的球体效果，这里应用了多层阴影，呈现的效果如下：
光照效果
上面的效果已经很有立体感了，这里我们再改变一下光照效果，让球体看起来更像斯诺克台球。
效果如下：
8 号球效果
我们再给球体加上数字 8，这样就有了台球黑8 的效果了。
HTML 代码：
CSS 代码：
.ball.eight{
width:110px;
