第十二讲：CSS渐变之径向渐变

与有明显带状色块的线性渐变不同，径向渐变以椭圆（缺省）和圆（circle）的形状为自己的渐变风格，默认从元素的中心出发，辐射到元素区域内的四周。该渐变的创建方式和圆有关，故称为径向渐变，radial-gradient，radial 意为径向的、辐射的等，词根与半径一词同，gradient是渐变。看下面的代码和效果感受一下使用了径向渐变做背景图像的美妙：

<style>
.rbox1 {
	width: 400px;
	height: 200px;
	background: radial-gradient(green, tan);
}
</style>

<div class="rbox1"></div>

点击查看效果

这是默认的径向渐变效果：绿色从元素的正中央，以椭圆的形状与棕褐色发生自然的过渡性渐变，向元素四周发散。下面，我们试着把渐变的形状变为圆形：

<style>
.rbox2 {
	width: 400px;
	height: 200px;
	background: radial-gradient(circle, green, tan);
}
</style>

<div class="rbox2"></div>

点击查看效果

可以明显看到，两种颜色的过渡性渐变是以圆形展开的。

我们甚至可以设置渐变的中心，用 at 0 0 或 at 10% 10% 等方式设置。以下例子，我们设置了渐变的形状和发起点，还多加了一个渐变颜色：

<style>
.rbox3 {
	width: 400px;
	height: 200px;
	background: radial-gradient(circle at 30% 20%, gold, green, tan);
}
</style>

<div class="rbox3"></div>

点击查看效果

有时可能需要硬边渐变，以营造界线分明的椭圆环或圆环：

<style>
.rbox4 {
	width: 300px;
	height: 300px;
	background: radial-gradient(gold 10%, green 11% 20%, tan 21% 30%, teal 31% 40%, cyan 41% 50%, transparent 51%);
	border: 1px solid gray; /* 边框用于观察 */
}
</style>

<div class="rbox4"></div>

点击查看效果

上例，渐变交界处我们做了软的硬过渡，意思是，上一个颜色终点和下一个颜色的起点存在 1% 的软过渡，这样能够消除锯齿。最后一个颜色是透明色，这样可以得到纯粹完美的圆环组合。该例元素宽高一致，所以即使不设置渐变形状，得出的各环形状是正圆而非椭圆，这种情形下如果需要椭圆，可在加入渐变颜色前面加入形状关键字 ellipse。

重复性径向渐变，repeating-radial-gradient，则允许我们以更少的代码绘制一系列的圆环，比如，假设我们需要制作一个红绿相间的重复性圆环：

<style>
.rbox5 {
	width: 300px;
	height: 300px;
	background: repeating-radial-gradient(green, green 5%, red 6%, red 10%);
}
</style>

<div class="rbox5"></div>

点击查看效果

我们早就知悉，渐变具有图像性质。那么，作为元素的背景，我们可以额外为之设置位置和大小。作为本讲的最后一个示例，我们将上一个示例即第五个例子改造一下，给它添加 background-position 和 background-size，看看得到的是什么效果：

<style>
.rbox6 {
	width: 300px;
	height: 300px;
	background: repeating-radial-gradient(green, green 5%, red 6%, red 10%) 0/30% 30%;
}
</style>

<div class="rbox6"></div>

点击查看效果

第六个示例的技巧，和使用 url() 函数加背景图片一样，用简写的方法在函数之后给出 background-position/background-size，需要特别注意的是，背景尺寸最后宽高都要设置。

作业：使用 radial-gradient 函数在 400*200的元素上绘制两个水平方向并排的青色（teal）圆球，球的直径为180px，要求，① 球的边缘不能有毛刺；② 元素的背景最终效果为粉红色（pink）但不允许单独设置背景色。提示：使用px设置颜色起始边界；将渐变视为图片，为其设置设置 repeat 属性（repeat-x或repeat-y，但当后面的背景位置和尺寸设置得当可以忽略此设置）；以简写形式设置类似于 center/cover 之类的 background-position 和 background-size，其中background-size 宽高都需要设置。

返回目录