<gradient>

  • 版本:CSS3
html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲

语法:

说明:

<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+