<gradient>

语法:

说明:

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

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

示例:

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

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-9.02.0-3.5

4.0

-9.0-webkit-

3.1-3.215.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.14.0-4.3-webkit-26.0+
16.0+26.0+5.1-6.0-webkit-7.0+4.4+
6.1+