我们先来实现一个基本的圆，HTML 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 实现的各种球体效果</title> <style type="text/css"> .circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; } </style> </head> <body> <figure class="circle"></figure> </body> </html>
这里使用的是 HTML5 新增标签 figure，也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果，添加一些基础的样式
上面实现了基本的圆形效果，这里增加径向渐变效果来实现更逼真的球体。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 实现的各种球体效果</title> <style type="text/css"> .circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; background:-webkit-radial-gradient(100px 100px, circle, #5cabff, #000); background:-moz-radial-gradient(100px 100px, circle, #5cabff, #000); background:radial-gradient(100px 100px, circle, #5cabff, #000); } </style> </head> <body> <figure class="circle"></figure> </body> </html>
上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。