Detailed description of css3 gradient, css3 gradient

Detailed description of css3 gradient, css3 gradient

Today, the gradient problem is summarized. The gradient is divided into linear gradient and radial gradient. Call, speak nonsense,

Linear Gradient:Background: linear-gradient (set the gradient form, the starting point of the first color, the position of the middle color, and the ending color );

Linear: Gradient Type (Linear gradient );

Gradient form: the optional parameter can be set in two ways-1. Set the rotation angle. 0 degrees indicates that the level is left to right, 90 degrees is from top to bottom, and the clockwise conversion starts from 0 degrees.

2. Use keywords. left indicates from left to right, top indicates from top to bottom, right indicates from right to left, and lefttop indicates from top to bottom. Similarly, leftbottom, righttop, and rightbottom are supported.

The intermediate color and the intermediate color position are optional.

However, we need to consider the compatibility of the browser. Let's write:

-Webkit-gradient (linear, 0 100%, from (Starting color, to (ending color);/* for Safari4 +, Chrome 2 + */

-Webkit-linear-gradient (start color, end color);/* for Safari 5.1 +, Chrome 10 + */

-Moz-linear-gradient (start color, end color);/* for firefox */

-O-linear-gradient (start color, end color);/* Opera */

Linear-gradient (start color, end color);/* standard attribute */

It is a headache for Internet Explorer.

Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = 'start color', endColorstr = "End color");/* IE6, IE 7 */

-Ms-linear-gradient (start color, end color);/* IE8 */

<Div class = "content1"> </div>

. Content1 {width: 500px; height: 300px; border-radius: 10%; background: # ade691;
Background:-webkit-linear-gradient (left, #88cfc3, # 329e8c 30%, # 096e5d); background:-moz-linear-gradient (left, #88cfc3, # 329e8c 30%, # 096e5d); background: filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '#88cfc3', endColorstr = '# 096e5d');/* IE6, IE7 */-ms-filter: "progid: DXImageTransform. microsoft. gradient (startColorstr = '#88cfc3', endColorstr = '# 096e5d') "; background: linear-gradient (lleft, #88cfc3, # 329e8c 30%, # 096e5d; float: left ;}
. Tit1 {font-size: 3em; font-weight: bold; color: # f00 ;}

Repetitive linear gradient: the repeating-linear-gradient attribute replaces the linear gradient linear-gradient;

<Div class = "content2"> </div>

. Content2 {width: 500px; height: 200px;
Background-image:-webkit-repeating-linear-gradient (red, green 40px, orange 80px );
Background-image: repeating-linear-gradient (red, green 40px, orange 80px );}

 

 

Radial Gradient:Radial-gradient (set the center of the gradient, gradient shape gradient size, starting color value, intermediate color value, and ending color)

Gradient center. An optional parameter. For example, 30px 20px indicates 20px distance from the left side to the top side. It can be a pixel, a percentage, or a keyword. The default value is the center position.

Gradient shape. optional parameter. Optional values: circle or eclipse [Default]

Gradient size, cyclable parameter, value options

Closest-side:

Specify the radius length of the radial gradient to the edge closest to the center of the circle.

Closest-corner:

Specify the radius length of the radial gradient from the center of the center to the nearest corner of the center.

Farthest-side:

Specify the radius length of the radial gradient as the farthest side from the center of the center to the center of the center.

Farthest-corner:

Specify the radius length of the radial gradient to the farthest angle from the center of the center to the center of the center.

Contain:

Contains, specify the radius length of the radial gradient from the center to the closest point to the center. Similar to closest-side

Cover:

Overwrite, specify the radius length of the radial gradient from the center to the farthest point from the center. Similar to farthest-corner

Circle farthest-corner round gradient, ellipse farthest-corner elliptical gradient

<Div class = "content3"> </div>

. Content3 {width: 500px; height: 200px;
Background-image:-webkit-radial-gradient (circle, hsla (60%, 60%,. 9), hsla (,. 9 ));
Background-image: radial-gradient (circle, hsla (60%, 60%,. 9), hsla (36, 60%,. 9); margin-top: 20px ;}

The css3 gradient is still under further research ~~

If you have any questions, please raise them. Thank you, (* ^__ ^ *) Hey ......

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)

How to Implement gradient effect in CSS3

To obtain the above linear gradient effect, we will define the CSS3 style as follows: background-image:-moz-linear-gradient (top, # 8fa1ff, # 3757fa ); /* Firefox */background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, # ff4f02), color-stop (1, #8f2c00);/* Saf4 +, Chrome */filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '# c6ff00', endColorstr =' #538300 ', GradientType = '0');/* IE */-moz-linear-gradient has three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from top left to bottom right. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors. -Webkit-gradient is the implementation parameter of the webkit engine for gradient. There are five parameters in total. The first parameter indicates the gradient type (type), which can be linear (linear gradient) or radial (radial gradient ). The second and third parameters are both a pair of values, indicating the gradient start point and end point respectively. These values can be expressed in coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner ). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters. The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient. IE uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color. GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient. Linear gradient uses the from () and to () Methods to specify the transition color points: background:-webkit-gradient (linear, left top, left bottom, from (#96ff00 ), color-stop (0.5, orange), to (rgb (255, 0, 0); linear gradient multiple transition points at the same position: background:-webkit-gradient (linear, left top, left bottom, from (#00 abeb), to (# fff), color-stop (0.5, # fff), color-stop (0.5, #66cc00 )); demonstration of comprehensive radial gradient effect: