About css3 background gradient

Regarding the gradient of CSS3, currently the major browsers do not have good support, so we need to add the major browser prefixes when we use it.

-moz-: Browser using Mozilla core (Firefox browser)

-webkit-: Browsers using Webkit core (Chrome, Safari browsers)

-o-: Browser using Opera core (Opera browser)

I won’t introduce too much about IE here, and IE is not considered for the gradient of the background color in this article

One. linear-gradient

1.Syntax: -moz-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……)

Parameters: The first parameter is the direction of the linear gradient

　　top: from top to bottom;

　　left: from left to right;

　　right: from right to left;

　　bottom: from bottom to top;

　　It can also be combined in pairs, for example, from top left: left top, from top right: right top, etc., I won’t introduce too much here;

　　Angle represents an angle (I have always thought that a plane rectangular coordinate system involving angles is intuitive enough).

　The second parameter and the third parameter are the colors of the starting point and the end point respectively. More parameters can be inserted between them to represent the gradient of multiple colors. The color supports hexadecimal numerical representation, or rgb can be used. (a) Numerical value

Example: background:-moz-linear-gradient(top,#000,#fff);

　Note: Represents the gradient from #000 to #fff

　　Background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

　Note: means 0-50% is #000, 50%-100% is #555

2.Grammar: -webkit-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>...) [New Grammar Writing Rules]

　　 -webkit-gradient(<type>,<start point>/<angle>,<end point>/<angle>,<color-stop>,<color-stop>……) 【Old Grammar Writing Rules】

　　The new grammar writing rules are the same as others, so I won’t introduce them too much here. Here are the old grammar rules:

Parameter: The first parameter represents the gradient type, which can be linear (linear) or radial (radial);

　The second parameter and the third parameter represent the starting point and end point of the gradient, which can be coordinates or key values;

　The fourth and fifth parameters represent the color of the starting point and the end point respectively. More parameters can be inserted between them to represent the gradient of multiple colors. The color supports hexadecimal numerical representation, or rgb( a) numerical value.

　Example: background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));

Note: Represents the gradient from top to bottom, from #fff to #000

　Background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));

Note: It means that from the upper left to the lower right, 0-50% is white, and 50%-100% is black with a transparency of 0.2

3.Syntax: -o-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>…)

Example: background:-moz-linear-gradient(top,#000,#fff);

　Note: Represents the gradient from #000 to #fff

Two. Radial gradient (radial-gradient)

Syntax: -moz-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>…);

　-webkit-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>…);

Oprea browser’s support for radial gradients is not very good yet, so I won’t introduce it here. In addition to the actual position, direction and color seen in linear gradients, radial gradients allow you to specify the shape of the gradient: circle and ellipse and the size: closest-side, closest -corner), farthest-side, farthest-corner, contain, cover. There is little difference between the settings of these sizes, which is a bit confusing.

Example: background:radial-gradient(#fff, #000);

　background: -webkit-radial-gradient(#fff , #000);

Note: Represents a circular gradient from white to black

　Background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000);

　Background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000);

Note: It means there is a gradient from white circle to black at 80% 20% position

2.css repeating gradient

Syntax: -moz-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……);

　 -webkit-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>…);

　 -o-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>…);

　-moz-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>…);

　-webkit-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>…);

Example: background: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

　background: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px);

Note: It represents a circle of black and white circles (don’t be too dizzy)

This article is excerpted from Da Mo’s blog http://www.w3cplus.com/content/css3-gradient