使用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> ]?