IT兄弟连 HTML5教程 CSS3属性特效 渐变3

4  径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

径向渐变的格式如下：

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>，<点>…)

径向渐变的参数描述如表1：

表1  CSS3径向渐变参数描述

5  径向渐变实例

虽然径向渐变要比线性渐变更为复杂，只要了解了其基本语法以及相关属性参数的作用，并不需要花太多的时间去适应。接下来，我们通过实战来加强径向渐变的使用。本节的所有例子我们都在一个宽度为400像素，高为300像素的容器中实现。

一、从容器内部向外径向渐变

先来看一个最简单的径向渐变，圆心都是容器正中间，从“#ffc107”颜色向“pink”颜色实现径向渐变，CSS代码如下：

在浏览器中查看效果如图1所示：

图1  简单径向渐变

如果你想制作一个圆形渐变，而不是一个椭圆形渐变，只需要添加一个关键词“circle”，我们在上例的基础上添加一个关键词“circle”，代码如下：

此时的渐变变成了圆形，在浏览器中查看效果如图2所示：

图2  圆形渐变

正如你所看到的，圆形的渐变是一个特殊的椭圆渐变，水平半径和垂直半径具有相同的长度值。既然圆形渐变是椭圆渐变的一种特殊情况，如果我们渐变主要半径（水平半径）和次要半径（垂直半径）不相同时就是一个椭圆形渐变。正如上面所言，主要半径和次要半径不相等时，制作的径向渐变是椭圆形渐变，在制作椭圆形渐变，可以使用关键词“ellipse”。

二、规定径向渐变的半径

除了使用关键词制作不同的径向渐变，还可以用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。径向渐变的半径设为“200px,100px”。水平半径为200px，垂直半径为100px，从“#ffc107”色到“pink”色径向渐变：

此时的渐变变成了水平半径为200px，垂直半径为100px的椭圆，在浏览器中查看效果如图3所示：

图3  自定义半径的径向渐变

三、规定径向渐变的半径及圆心位置

除了上述方法能实现一些简单的径向渐变效果之外，还可以使用渐变形状配合圆心定位。主要使用“at”加上关键词来定义径向渐变中心位置。径向渐变中心位置类似于background-position属性。例如，圆心位置在“100px,150px”处，水平半径为200px，垂直半径为100px，从“#ffc107”色到“pink”色径向渐变：

此时的渐变变成了水平半径为200px，垂直半径为100px且圆心位置在“100px 200px”处的椭圆，在浏览器中查看效果如图4所示：

图4  自定义半径及圆心位置的径向渐变

设置圆心位置除了使用特定的值外，可以使用百分比和一些关键词来定义，如“center”、“top”、“right”、“bottom”、“left”及这些关键词的组合，如“top left”、“right bottom”等，组合位置的关键词顺序可以调换。

四、重复的径向渐变

跟线性渐变一样，我们也可以为径向渐变设置重复。以同样的方式，可以使用相关的属性创建重复的径向渐变。其语法和linear-gradient类似，只是以一个径向渐变为基础进行重复渐变，如下例所示，我们制作一个三色重复的径向渐变：

在浏览器中查看，渐变效果如图5所示：

图5  三色重复径向渐变

理解了上述的几个实例后，读者就可以自己DIY渐变效果了。