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

4  径向渐变

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

径向渐变的格式以下：

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

 

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

表1  CSS3径向渐变参数描述

5  径向渐变实例

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

 

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

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

 

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

图1  简单径向渐变

 

若是你想制做一个圆形渐变，而不是一个椭圆形渐变，只须要添加一个关键词“circle”，咱们在上例的基础上添加一个关键词“circle”，代码以下：

 

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

 

图2  圆形渐变

 

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

 

2、规定径向渐变的半径

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

 

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

图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”等，组合位置的关键词顺序能够调换。

 

4、重复的径向渐变

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

 

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

图5  三色重复径向渐变

 

理解了上述的几个实例后，读者就能够本身DIY渐变效果了。