语法

background-image:linear-gradient(point,color position,color position)

• point 可以为 top,to bottom,45deg 等
• color 颜色
• position 起始、结束位置 可以用 百分比 或 像素 等

注意：chrome 基本支持标准的 css3 语法。而 firefox，尤其是 safari 经常需要 vendor prefix（厂家声明）

例子

background-image:linear-gradient( -45deg, blue, red )

background-image:linear-gradient( to right top, blue, red )

background-image:linear-gradient( top ,blue,red )

background-image:linear-gradient(left,red 0,green 33%,blue 66%,yellow 100% )

background: -webkit-radial-gradient(50% 50%, closest-corner, #1a82f7, #2F2727);background:-moz-radial-gradient(50% 50%, closest-corner, #1a82f7, #2F2727)

查看 样式表文件

厂家声明顺序

-webkit- -moz- -ms- -o- 等，不带厂家前缀的标准声明放在最后！

低版本 ie？

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

意外

webkit（chrome,safari）的 90deg 和 gecko(firefox) 90deg 解释不一样！前者上下，后者水平！

radial-gradient

• closest-side The gradient’s ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
• closest-corner The gradient’s ending shape is sized so it exactly meets the closest corner of the box from its center.
• farthest-side Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
• farthest-corner The gradient’s ending shape is sized so it exactly meets the farthest corner of the box from its center.

tips: body radial-gradient 可能会需要 html {height:100%;} !