CSS3 gradient, css3

CSS3 gradient, css3

When I went to Quora today, I found that the background image on the login page is quite appealing, just like F12 ......

Learning the gradient effect of CSS3, gradient

The gradient is divided into linear gradient (linear-gradient) and egg gradient according to the manifestation. Oh no, It is a radial gradient (radial-gradient), repeating-linear-gradient) and repeated radial gradient (repeating-radial-gradient)

Put the exercise file on github and click the open link.

Reference: The linear gradient radial gradient of desert also has this click written by Zhang xinxu.

How to Implement css3 gradient?

Different browsers have different prefixes, which are basically similar. The following is a linear gradient, starting from the top, from black to white.
-Webkit-linear-gradient (top, #000, # fff );
-Moz-linear-gradient (top, #000, # fff );
-O-linear-gradient (top, #000, # fff );
You can also add colors in the middle of the gradient.
-Webkit-linear-gradient (top, #000, # eee 20%, # fff );
You can also use color stop to keep up with the preceding meaning.
-Webkit-linear-gradient (top, #000, color-stop (0.2, # eee), # fff)

For CSS3 rounded corners and gradient issues

Hello, versions earlier than ie8 do not support CSS 3 rounded corner style writing. You can try ie9.