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);
}