《
详解CSS3线性渐变》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234X62013.htm
CSS3中实现CSS3线性渐变为我们提供了便利。只管Mozilla和Webkit通常对CSS3属性采用同样的语法，但是对于渐变，他们很可怜的不能达成一致。Webkit是第一个支持渐变的浏览器内核，它使用下面的构造：
PS：事实上，我们在《RGBa颜色的浏览器支持》提到的IE的解决办法，就是使用这个渐变滤镜。
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
渐变的类型? (linear) 渐变开始的X Y 轴坐标(0 0 – 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 开始的颜色? (from(red)) 结束的颜色? (to(blue)) Mozilla
IE并不支持CSS渐变，然而供给了渐变滤镜，可以实现最简略的渐变后果：
Firefox，从3.6版本才开始支持渐变，更爱好和Webkit稍微不同的语法。
在从前，尺度的做法就是制造一个图片，并将其设为一个元素的背景图片，而后让其程度平铺。然而使用CSS3，这是个小Case。
如果你不需要从一个颜色到另一个颜色的100%渐变怎么办,详解CSS3 transform？这就是color stop起作用的时候了。一个广泛的设计技巧是使用一个较短而轻微的渐变，好比：
如果我们想要增加多一种(多少种)颜色，我们可以这样做：
请注意我们将渐变的类型——linear——放到了属性前缀中了 渐变从哪里开始? (top – 我们也能够应用度数，比方-45deg) 开端的色彩? (red) 停止的颜色? (blue) Color-Stops
对-moz 版本，我们定义，从元素的20%的高度的处所开始是红色。 而对于-webkit，我们使用color-stop，采取两个参数：哪里开始结束，使用哪种颜色。 IE
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;
对于CSS渐变的一些要点： 尽可能的使用它。假如让IE用户看到一个固定的纯色，我激励你使用这种方式； IE6/7/8, Opera, Safari 3, 跟Firefox 3 不能渲染CSS3 渐变，Firefox 和Safari用户通常常常升级浏览器，而Chrome的主动升级机制会在后盾自动进级，所以这并不是个大问题； 老是为不支撑这些浏览器私有属性的浏览器利用一个默认的，纯色背景； 永远不要使用红色到蓝色的渐变，就像我用作例子的这种； 页面毋庸在每个阅读器里面看起来完整一样！ Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。 Tag：线性渐变 CSS3 线性渐变 CSS3
/* Syntax, taken from: */
-moz-linear-gradient( [<,详解CSS3 text-shadow;point> || <angle>,]? <stop>, <stop>,详解CSS3 box-shadow; [, <stop>]* )
/* In Practice */
background: -moz-linear-gradient(top, red, blue);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
留神顶部的浅灰色到白色的渺小的渐变
不要担忧这些语法会让你看花眼，我也是这样的！只有记得咱们须要用一个逗号来隔开这个参数组。
/* Syntax, taken from: */
-webkit-gradient(<type>, <point> [, <radius>]?, <,详解CSS3 border-radius;point> [, <radius>]? [, <stop>]*)
/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
--> [
网站建设之]详解CSS3线性渐变
这次,详细讲解CSS Overflow属性，我们让渐变结束于8%，而不是默认的100%。请注意我们也在头部采用了一个边框，以构成对照。这很常用。
(责任编辑：网站建设)
详解CSS3线性渐变相关文章