Deep understanding of CSS linear gradient linear-gradient and csslinear-gradient

Deep understanding of CSS linear gradient linear-gradient and csslinear-gradient
* Directory [1] Definition [2] gradient line [3] Color Mark [4] repeated gradient [5] multi-Background [6] Application Scenario [7] Earlier in IE compatibility

Before the emergence of CSS3, gradient effects can only be achieved through graphic software design images, poor scalability, but also affect performance. The gradient that has now entered the CSS3 standard can easily complete the gradient effect. Gradient is actually divided into two types: linear gradient and radial gradient. This paper introduces linear gradient.

 

Definition

Gradient is actually a smooth transition between two or more colors. The linear gradient is the transition of multiple colors along a straight line (known as the gradient line. The implementation of gradient consists of two parts: gradient line and Color Mark. The gradient line is used to control the direction of the gradient. The Color Mark contains a color value and a position to control the color change of the gradient. The browser fades out the color of each color to the next one to create a smooth gradient. You can create a multi-color gradient effect by determining multiple colors.

[Note] safari4-5, IOS3.2-4.3, android2.1-3 only supports linear gradient, and need to add-webkit-; safari5.1-6, IOS5.1-6.1, android4-4.3 support linear and radial gradient, -webkit-; IE10 + and other advanced browsers must be added to support standard writing.

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)<side-or-corner> = [left | right] || [top | bottom]

 

Gradient line

The gradient line expands from the center of the gradient box to the two directions. The starting point and the ending point are the intersection of the gradient line and the vertical line passing through the angle of the gradient box.

The first parameter of the gradient is used to specify the gradient line. The default value is to bottom. There are two ways to specify the gradient line direction

[1] Use Angle

0deg indicates to rotate clockwise along the center line of the element from bottom up (similar to the Y axis)

[Note] For earlier versions of Web kit, for example, safari in windows, 0deg indicates the direction from left to right along the element center line (similar to the X axis ), and the positive angle indicates clockwise rotation.

Therefore, the linear gradient angle between the old version of webkit and the standard browser is

-Webkit-browser = 90deg-standard browser

Equivalent to-webkit-linear-gradient (90deg, red, blue) = linear-gradient (0deg, red, blue)

[Note] For webkit kernels, use javascript to change the element style. When a private style with-webkit-and a standard style without-webkit-exist at the same time, it is not necessarily followed by the front. Therefore, if the two statements have the same effect but different parameters, you must use browser recognition to separate the two statements.

[2] Use keywords

To top-> 0 degto right-> 90 degto bottom-> 180 degto left->-90deg (or 270deg) to top left->-45deg (or 315deg) to top right-> 45 degto bottom left->-135deg (or 225deg) to bottom right-> 135deg

[Note] the safari browser of the window system does not support the 'to' plus direction keyword, such as to left. It only supports direction keywords, such as left. Of course, the left and to left directions are exactly the opposite.

 

Color Mark

The browser does not have a default value for the color label, and at least two color labels must be set. The color consists of the color and position. The color can be in any color mode, and the position can be in percentages or numeric values.

[Note] You can set a negative value for the color position.

[1] The color must be in front and placed behind

// Correct background-image: linear-gradient (red 0%, blue 100%); // error background-image: linear-gradient (0% red, 100% blue );

[2] The position can be omitted. By default, the browser sets the position of the first color to 0% and the position of the last color to 100%.

Background-image: linear-gradient (red 0%, blue 100%); // equivalent to the previous background-image: linear-gradient (red, blue );

[3] If the gradient has only two colors, and the position of the first color is set to n %, the position of the second color is set to m %. Then, the browser sets the range of 0%-n % to the solid color of the first color, and the range of n %-m % to the transition from the first color to the second color, m %-100% ranges to the solid color of the second color.

Background-image: linear-gradient (red 30%, blue 60%); // equivalent to the previous background-image: linear-gradient (red 0%, red 30%, blue 60%, blue 100% );

[4] gradient colors are evenly distributed if no position is specified

background-image: linear-gradient(red,yellow,green,blue);

[5] If multiple colors occupy the same position, n % is occupied for example, a, B, and c, then, 0%-n % is the gradient of the color of the previous color and a color, and then the color of a and c of n %-n % is abrupt; n %-100% is the gradient between the c color and the next color. Therefore, B in the middle is useless.

Background-image: linear-gradient (red, yellow 50%, white 50%, black 50%, blue); // equivalent to the previous background-image: linear-gradient (red, yellow 50%, black 50%, blue );

 

Repeated gradient

Repeated gradient can achieve the repeated Effect of linear gradient, so that the Color Mark repeats infinitely in the direction of the gradient line, to achieve some special effects

[Note] the duplicate gradient takes effect only when the first and last two colors are not 0% or 100%.

background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);background-image: repeating-linear-gradient(blue 20%,green 50%);

Paper Effect

You can achieve the horizontal paper effect by repeating the gradient.

Div {height: 200px; width: 200px; font: 14px/20px ''; text-indent: 2em; background-image: -webkit-repeating-linear-gradient (# f9f9f9, # f9f9f9 9%, # ccc 10%); background-image: repeating-linear-gradient, # ccc 10% );}

 

Multi-Background

Use multi-Background attributes to add a gradient transparency effect to the image using a gradient color with transparency

background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');

 

Application scenarios

In CSS styles, the gradient is equivalent to the background image. Theoretically, it can be used wherever the url () value is used. For example, the most common background-image, list-style-image, and border-image. But so far, it has only been perfectly supported in the background image.

[1] background-image

background-image: -webkit-linear-gradient(pink,lightblue,lightgreen);background-image: linear-gradient(pink,lightblue,lightgreen);

[Note] the size of the gradient box is determined by the background-size. The default value is padding box.

[2] list-style-image

list-style-image: -webkit-linear-gradient(red,blue);list-style-image: linear-gradient(red,blue);font-size: 50px;

[Note] the size of the gradient box is determined by font-size. The default value is 1em.

[Note] firefox does not support setting in list-style-image.

[3] border-image

-webkit-border-image:  -webkit-linear-gradient(black,green) 1/10px;    border-image:  linear-gradient(black,green) 1/10px;

[Note] the size of the gradient box is determined by borer-width. safari always implements the performance with fill parameters.

 

IE compatibility

IE9-the browser does not support this attribute, but you can use IE's quasi-proprietary filter syntax for compatibility.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');

GradientType indicates the gradient line direction. 0 is vertical (default). 1 is horizontal. # color indicates the color Mark. The format is # aarrggbb, where aa indicates transparency, rrggbb is the color of the rgb mode. The default value of startColorstr is # ff0000ff endColorstr is # ff000000

[Note] the IE filter only supports the first and last positions, and the direction can only be vertical and horizontal, so it has great limitations.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');