CSS3 Background Linear gradient

5. Background linear gradient: background-gradient

(1) Linear: linear gradient,

Google Chrome: (WebKit)

Background:-webkit-gradient (linear, 0 0,0 80%, from (#fff), to (#000));(horizontal gradient)

Background:-webkit-gradient (linear, 0 0, 80% 0, from (#fff), to (#000));(vertical gradient)

Background:-webkit-gradient (linear, 0 0, (orangeed), to (blue));(slash gradient)

Firefox browser:

Background:-moz-linear-gradient (left, #fff, #000); The color gradient is right-to-bottom (black-white)

Background:-moz-linear-gradient (right, #fff, #000); The color gradient is left-to-bottom (black-white)

background:-moz-linear-gradient (Top, #fff, #000 ), color is from bottom to top gradient (black-white)

background:-moz-linear-gradient (top, right, #fff, #000), color from bottom to top, left to right (black-white)

(2) Circular gradient:

Background:radial-gradient (Circle, #fff, #ffo, #080);(circle value 100px, 100px round)

Background:radial-gradient (Ellipse, #fff, #ffo, #080);(ellipse value is 100px, 50px is not the same ellipse)

Represents a gradient graphic effect (graphic or oval), which can be used in English or coordinate points

CSS3 Background Linear gradient