CSS3 的线性渐变

最近学习的比较多，比较杂，趁晚上有空之余将一些总结记下。今天记录的是 CSS 3 线性渐变相关的一些知识。

css3-linear

CSS 3 的线性渐变也称作 linear gradients，顾名思义就是在一条直线上实现两种以上的色彩变化过程。嗯，废话。接下来将从 CSS 3 的属性，各个浏览器的兼容方面来总结。

线性渐变其实很容易去定义和实现的，而且如今很多浏览器都支持。Android 2.3+, chorome 1+ , Firefox 3.6+, Opera 11.1+ 和 safari 4＋基本都支持 CSS 3 的线性渐变。但 IE 支持的渐变不是使用了 CSS 3 ，而是使用了滤镜效果。

一个渐变的组成：

渐变的形式——线性渐变还是中心渐变。
渐变的开始的角度。
渐变的结束的位置。
渐变过程中要使用的颜色，从一种颜色到另外一种颜色，还有这两种颜色之间的过度情况。

定义一个简单的 CSS 3 渐变：

linear-gradient( angle or side or corner, color stop, color stop )

首先，你需要定义你是使用那一种渐变（即前文的形式，下同），例如 “linear”-gardient。

然后，你需要定义渐变开始的那个点的渐变角度。这一步有两种方法，一种是从数字的方式来定义（0－359）。另外一种方法是使用定义好的一些“函数” ，例如 left，right，bottom 和 top。默认的角度是从 top 到 bottom（从上往下）。

最后你需要定义你的色彩表。定义您的色彩使用的是色彩代码（例如＃800888；）和一个可选的百分比停止，告诉浏览器的百分比就行了。

所以，可以这样来定义你的 css 3：

linear-gradient( left, #999999 0%, #ffffff 100%)

然后将其加到一个 div 的 background 里面：

div {
    background-image: linear-gradient( left, #999999 0%, #ffffff 100%);
}

浏览器对 linear-gradient （线性渐变）的支持：

传说中令人讨厌的 IE 不怎么支持 CSS 3 线性渐变，所以通过 CSS 滤镜来实现：

/* IE 5.5–7 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1)";
/* IE 10 */
-ms-linear-gradient(left, #999999 0%, #ffffff 100%);

Firefox:

－moz-linear-gradient( left, #999999 0%, #ffffff 100%);

Opera:

-o-linear-gradient(left, #999999 0%, #ffffff 100%);

Webkit( safari 5.1+ chrome 10+ )

-webkit-linear-gradient( left, #999999 0%, #ffffff 100%);

为了兼容 chrome 2+ 和 sofari4＋以上的一些较老的版本，需要这样写：

-webkit-gradient( linear, left top, right top, color-stop( 0%, #999999), color-stop(100%, #ffffff)

好吧，总的来说，就是这样：

background: #999999;
background: -moz-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -o-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -ms-linear-gradient(left, #999999 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
background: linear-gradient(left, #999999 0%, #ffffff 100%);

线性渐变的角度：

不同的角度给予线性渐变不同的效果。除了使用精确的度数来表示之外，我们还可以使用一些关键字（如上）：

left，right， top，bottom，center

然而这 5 个方位可以组合到一起，而形成：

top right，top left，top center，bottom right，bottom left，bottom center，right center，left center

需要注意的是 IE 只支持从 left 到 right，从 top 到 bottom 。

渐变的色彩过程：

相信你是看过彩虹的吧？用CSS3 渐变效果完全可以画出一条彩虹来，因为可以在里面定义多种色彩过度的。这，有空不妨一试。

两个不错的在线 CSS3 渐变发生器：

CSS3 Gradient Generator

Ultimate CSS Gradient Generator

本文参考出处：CSS3 Linear Gradients

掌心