Html制作圆，球

1.圆形：在HTML5中，<figure>表示的是一幅图像或图像的一部分内容，移除内容也不会影响需要表达的语义。
要把这个元素创建成一个圆，我样只要给它设置一个宽度和高度，并且设置border-radius值为50%。border-radius值只要超过50%就能制作一个圆。当然，其前提是元素的width和height是相同（即是一个正方形）。

<figure class="circle"></figure>

.circle {
    display: block; 
    border-radius: 50%; 
    height: 300px; 
    width: 300px; 
    margin: 0; 
}

2.径向渐变
radial-gradient属性需要一些参数。第一个是渐变的圆心。在此之前一般是从shape所在的position来定。在这个示例中，圆心的位置是(100px,100px)。

接下来要指定一系列的颜色。你可以指定两个以前的颜色，同时需要给他们指定对应的位置，让他们有一定的距离，使渐变颜色能更好的融入在一起。

本例中指定了两个颜色。第一个颜色从0%慢慢过渡到位置在100%位置的颜色。如果我们想要其他的渐变效果，可以指定距离，指定距离可以使用像素或百分比。在接下来的示例中，我们可以看到。

现在的3D效果看起来有点“3D-ish”。没关系，我们可以让其变得更好看一点。

.circle { 
    display: block; 
    background: black; 
    border-radius: 50%; 
    height: 300px; 
    width: 300px; 
    margin: 0; 
    background: radial-gradient(circle at 100px 100px, #5cabff, #000); 
}