CSS3 背景线性渐变 Linear Gradients 介绍

Question

CSS3 线性渐变是 CSS3 中最简单的一种应用，可以免去我们频繁的去修改背景图，可以无限拉大背景的区域，而不用去考虑背景图是否清晰，因为是程序自动生成的，所以算的上是一种矢量的图，如果你对 Canvas 熟悉，你也可以使用这个绘图工具去制作一个背景图当然，使用 CSS3 的样式控制是最简单的了。

CSS3中使用渐变，每个浏览器实现的方法有所不同，主要分为两种，下面给大家介绍下。

webkit 内核的 Linear Gradients

-webkit-gradient 是 background 的一个属性值；

webkit 内核的 safari、 Chrome 的 Linear Gradients 线性渐变基本语法：

background-image:-webkit-gradient(type, x1 y1, x2 y2, from(开始颜色值), to(结束颜色值), [color-stop(偏移量小数, 停靠颜色值), ...] );

参数

webkit 内核的 Linear Gradients 线性渐变第一组参数 type（类型）为 linear

第二组参数是 x1 y1, x2 y2，颜色开始点和颜色结束点的坐标。x1, x2, y1, y2 的取值范围为 0%-100%，x1 和 x2 也可以取值 left（或0%）或 right（或 100%），同样 y1 和 y2 可以取值 top（或 0% ）或 bottom（或 100% ）；

• 当 x1 等于x2，y1 不等于 y2，实现垂直渐变，调整 y1、y2 的值可以调整渐变半径大小
• 当 y1 等于 y2，x1 不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小
• 当 y1 不等于 y2，x1 不等于 x2，实现角度渐变
• 当 x1 等于 x2，y1 等于 y2，实现没有渐变，取 from 色，即 from(#F54D54)

from(开始颜色值), to(结束颜色值) 是两个渐变颜色值；

[color-stop(偏移量<小数> ,停靠颜色值), ...]：可以使用多个 color-stop，如果渐变只有 2 个颜色，那么可以不使用该参数；偏移量必须为小数，

如果偏移量 >=1 那么该 color-stop 相当于无效；

演示

div {
    width:200px;
    height:200px;
    border:1px solid #CCC;    
    background-image: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#000), to(#FFF), color-stop(0.3, #336600), color-stop(0.5, yellow));
}

效果

注意：红线上的颜色值都是相同的，并且和绿色的线保持垂直。

Firefox 的 Linear Gradients

-moz-linear-gradient 是 background 的一个属性值；

Firefox 的Linear Gradients 基本语法：

background-image:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数

Point：渐变出发的点（开始点）。

单位可以是百分比，也可以是像素。或使用 left、center、right 进行水平定位，也可以使用 top、center、buttom 进行垂直定位。这点非常像 background-position。

angle：渐变出发的方向，它代表的是渐变方向和水平线之间的夹角，逆时针方向。

stop：渐变停靠点，它有两部分组成 <color, pos>，pos 为 0~100% 之间的值。注意 0% 代表的是起始点，100% 代表的是结束点。

演示

div {
    width:200px;
    height:200px;
    border:1px solid #CCC;
    background-image: -moz-linear-gradient(50% 180px 90deg, #000000 0%, #FFFFFF 30%, #336600 60%,#662C13 90%)
}

效果

注意：如果不指定第二个Stop点的位置（30%），他会介于第三个 Stop 和第一个 Stop 点中间。