<gradient>

语法：

<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

说明：

<gradient> 允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。
  • 渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。

  • <gradient> 可以应用在所有接受图像的属性上

    示例：

    background-image: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-9.0 2.0-3.5 4.0-9.0
-webkit-		 3.1-3.2 15.0+ 3.2-4.3
-webkit-		 2.1-3.0
-webkit-		 10.0-25.0
-webkit-
10.0+ 3.6-15.0
-moz-		 10.0-25.0
-webkit-		 4.0-5.0
-webkit-		 5.0-6.1 4.0-4.3
-webkit-		 26.0+
16.0+ 26.0+ 5.1-6.0
-webkit-		 7.0+ 4.4+
6.1+