CSS3 Gradient-CSS3渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)（Opera浏览器）、Trident（讨厌的IE浏览器）。本文照常忽略IE不管，我们主要看看在Mozilla、Webkit、Opera下的应用，当然在IE下也可以实现，他需要通过IE特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。那我们了解了这些，现在就开始今天的主题吧。

线性渐变在Webkit下的应用

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000)); //有5个属性（老式写法）

background: -webkit-linear-gradient(top,#ccc,#000);//(新式写法) 其中可以写多个颜色的渐变

线性渐变在Mozilla下的应用

background: -moz-linear-gradient( top,#ccc,#000);

【CSS3 RGBA】
语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间 (1表示无透明度，0表示透明度为100%·即完全透明)

取值：

<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：Saturation(饱和度)。取值为0%到100%之间的值；

<percentage> ：Lightness(亮度)。取值为0%到100%之间的值；

<opacity> ：alpha(透明度)。取值在0到1之间；

【CSS3的圆角Border-radius】

巴特西

CSS3 Gradient-CSS3渐变

最新文章

热门文章