渐变色

CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、 WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。

 

例如：背景的渐变色

background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);

最新版的渐变色的属性值主要有三个：位置值，开始颜色值，结束颜色值

 

线性渐变在 Trident (IE) 下的应用

　　语法：

1 2	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

　　IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。

还可以指定角度实现渐变

例如：

 

.deg45 {

 

  background: -moz-linear-gradient(45deg, #ace, #f96);

 

  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));

 

  background: -webkit-linear-gradient(45deg, #ace, #f96);

 

  background: -o-linear-gradient(45deg, #ace, #f96);

 

}