linear-gradient()

语法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop> 用于指定渐变的起止颜色：

<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用线性渐变创建图像。
  • 如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。

  • 用默认的渐变方向绘制一个最简单的线性渐变

    示例代码：

    （图一）

    linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-gradient(180deg, #fff, #333); linear-gradient(to bottom, #fff 0%, #333 100%);

    以上几句代码都可以实现如（图一）的渐变效果

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12+ 2-3.5 4-9 -webkit- 3.1-3.2 9-11 3.2-4.3 -webkit- 2.1-3 -webkit- 7 -webkit- 10-11 61 56 10+ 11.4 4+ 1.2 7.12
10+ 3.6-15 -moz- 10-25 -webkit- 4-5 -webkit- 11.1-11.5 -o- #1 5.0-6.1 -webkit- 4-4.3 -webkit- 10 11.1-11.5 -o- #1
16+ 26+ 5.1-6 -webkit- 11.6-12 -o- 7.0+ 4.4+ 12 -o-
6.1+ 12.1+ 12.1+
  1. 通过selectivizr，IE6+也可支持。本页下方的示例已使用此方案。IE5.5-9.0也可以使用滤镜来实现该效果: progid:DXImageTransform.Microsoft.Gradient()
  2. chrome4.0-9.0、iOS3.2-4.3、Android2.1-3、Blackberry7使用更老的语法：-webkit-gradient(linear,…)

示例：