Gradient of CSS3 background gradient

Gradient of CSS3 background gradient

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-Gradient (radial gradient ). Remember that the gradient is not an attribute of CSS3, but an attribute value. Although it is not specified in CSS3 that the gradient is for the background, however, I have learned that only the background can apply the gradient attribute (Background-image is also supported).

We will explain the basic usage of the two gradient directly through two instances:Share the best UI front-end framework!

Linear gradient linear-gradient:

. Code

1. Background:-moz-linear-gradient (left, # ace, # f96);/* Mozilla */
2. Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96);/* Old gradient for webkit */
3. Background:-webkit-linear-gradient (left, # ace, # f96);/* new gradient for Webkit */
4. Background:-o-linear-gradient (left, # ace, # f96);/* Opera11 */

   The-Webkit-gradient is the old version of webkit kernel browser.

   The effect is as follows:

   Radial gradient radial-gradient: share the best UI front-end framework!

   . Code
   1. Background:-moz-radial-gradient (# ace, # f96, # 1E90FF );
   2. Background:-webkit-radial-gradient (# ace, # f96, # 1E90FF );

      Effect:

      Internet ExplorerGradientAnd other modern browsers, we will > And < > The two articles are described separately.