使用gradient的地方有：
background-image
border-image
list-style-image
content
property
linear-gradient:
语法：
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops where<side-or-corner> = [left | right] || [top | bottom]and<color-stop> = <color> [ <percentage> |<length> ]?
用法：
1 .grad { 2 background-color: #F07575; /* fallback color if gradients are not supported */ 3 background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */ 4 background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */ 5 background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/ 6 background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 7 background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ 8 }
值得注意的是safari和same old browsers不支持关键字to，显示颜色会和其他浏览器相反，这时只需要把起始颜色和终止颜色调换位置或者互换side-or-corner的值。
radial-gradient:
Formal grammar:
radial-gradient( [[ circle || <length> ] [ at <position> ]? , |
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> , <color-stop> [ , <color-stop> ]+ )
\------------------------------------------------------------------------------/\--------------------------------/
Definition of the contour, size and position of the ending shape List of color stops
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop> = <color> [ <percentage> | <length> ]?