CSS3------Gradient

Places to use gradient are:

Background-image
Border-image
List-style-image
Content Property

Linear-gradient:

Grammar:

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 is 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)*/5 Background-image:-ms-linear-gradient (top, HSL (0, 80%, 70%), #bada55);/*For pre-releases of IE ten*/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 is last*/8}

It is worth noting that Safari and same old browsers do not support keyword to, the display color will be the opposite of other browsers, only need to change the starting color and the ending color position or interchange Side-or-corner value.

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>]+] \------------------------------ ------------------------------------------------/\--------------------------------/defini tion of the contour, size and position of the ending shape List of color stops where <extent-key word> = Closest-corner | Closest-side | Farthest-corner | Farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?