实现的各种球体效果

我们先来实现一个基本的圆，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>

上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。