css3中渐变效果实现示例

渐变效果是backround-image属性的一个值，语法格式如下：

background-image:linear-gradient(方位, 起始色, 末尾色);

其中，方位为可选参数，起始色与末尾色为必选参数，如果不指定方位参数，默认的渐变由上往下。

方位支持的值： to top、to top right、to right、to bottom、to bottom left、to left、to top left等，除此之外，方为还支持角度单位deg。

显示效果：

www.111com.net
www.111com.net
www.111com.net
0×2.多色渐变
可以在linear-gradient内部配置多个颜色值来实现多色渐变效果，请看下面的实例：

显示效果：

www.111com.net
www.111com.net
www.111com.net
0×3.透明渐变
渐变配合rgba颜色选择器可以实现图像的层次效果，请看下面的实例：

显示效果：

www.111com.net
0×4.平铺渐变
配合基准线的设置，平铺渐变能够实现从起始的颜色基准线位置到结束的颜色基准线位置的重复平铺，请看下面的实例：

显示效果：

www.111com.net
0×5.放射性渐变
放射性渐变与普通渐变稍有区别，顾名思义，这种渐变会呈现放射性效果，而不是线性效果，先来看几个概念。

1）放射源形状

circle 圆形；
ellipse 椭圆形（默认值）；

2）发散方向

at top 从顶部中央发散；
at left 从左侧中央发散；
at right 从右侧中央发散；
at bottom 从底部中央发散；
at center 从图形中心点发散（默认值）；
at top right 从顶部右边发散；
at top left 从顶部左边发散；
at bottom left 从底部左边发散；
at bottom right 从底部右边发散；

3）放射源半径

closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角；

4）配置语法

background-image: radial-gradient([放射源形状] [发散方向] [放射源半径] [指定放射半径],[颜色值1],[颜色值2],[颜色值3],[颜色值N]);

除了颜色值1和2是必选参数外，其他都是可选参数。

下面用一个实例来演示上面这些概念：