Shulou(Shulou.com)06/03 Report--

This article introduces how to use the linear gradient linear-gradient in CSS, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

Before the emergence of CSS3, the gradient effect can only be achieved through graphics software design pictures, poor scalability, but also affect performance. Now that you have entered the CSS3 standard gradient, you can easily complete the gradient effect. Gradient is actually divided into two types: linear gradient and radial gradient. Linear gradient is introduced in this paper.

Define

A gradient is actually a smooth transition between two or more colors. A linear gradient is a transition of multiple colors along a straight line (called a gradient line). The realization of the gradient consists of two parts: the gradient line and the color stop. The gradient line is used to control the direction in which the gradient occurs; the color stop contains a color value and a position to control the color change of the gradient. The browser fades from the color of each color stop to the next to create a smooth gradient, and you can create a multi-color gradient effect by determining multiple color stops.

[note] safari4-5, IOS3.2-4.3 and android2.1-3 only support linear gradients, and need to add-webkit-;safari5.1-6, IOS5.1-6.1and android4-4.3 to support linear and radial gradients, and need to add-webkit-;IE10+ and other high-version browsers to support standard writing.

CSS Code copies content to the clipboard

= linear-gradient ([[| to],]? [,] +) = [left | rightright] | | [top | bottombottom]

Gradient line

The gradient line extends from the center of the gradient box to two directions, and the starting point and the end point are the intersection of the gradient line and the vertical line passing through a corner of the gradient box.

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

[1] use Angl

0deg represents a bottom-up direction along the centerline of the element (similar to the y-axis), and a positive angle indicates clockwise rotation

[note] for older browsers of-webkit-, such as safari browsers under windows, 0deg represents a left-to-right direction along the centerline of the element (similar to the x-axis), and a positive angle indicates counterclockwise rotation

So the linear gradient angle relationship between the old version of webkit- browser and the standard browser is

-webkit- browser = 90deg-the standard browser is equivalent to-webkit-linear-gradient (90degreginal redjejmage blue) = linear-gradient (0degregreginal redmareblue)

[note] for browsers with the webkit kernel, use javascript to change the style of elements. When a proprietary style with-webkit- and a standard style without-webkit- exist at the same time, it does not necessarily overwrite the front. So if the two writing methods have the same effect, but the parameters are different, use browser recognition to write different situations.

[2] use keywords

CSS Code copies content to the clipboard

To top-> 0deg to rightright-> 90deg to bottombottom-> 180deg to left->-90deg (or 270deg) to top left->-45deg (or 315deg) to top rightright-> 45deg to bottombottom left->-135deg (or 225deg) to bottombottom rightright-> 135deg

[note] safari browsers on window systems do not support keywords such as' to' plus orientation', such as to left. It only supports direction keywords, such as left. Of course, left and to left are going in the opposite direction.

Color code

The browser does not have a default value for color stops and must set at least two color stops. The color code consists of color and position. Colors can use any color mode, while positions can use percentages or numeric values.

[note] the position of the color can also be set to a negative value

[1] it must be the first color and the last position.

JavaScript Code copies content to the clipboard

/ / correct

Background-image: linear-gradient (red 0% jade blue 100%)

/ / error

Background-image: linear-gradient (0% red,100% blue)

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

JavaScript Code copies content to the clipboard

Background-image: linear-gradient (red 0% jade blue 100%)

/ / equivalent to the previous one

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%. The browser will set the range of 0% murn% to the solid color of the first color, the range of n% murm% to the transition from the first color to the second color, and the range of m% murm 100% to the solid color of the second color.

CSS Code copies content to the clipboard

Background-image: linear-gradient (red 30% Jade blue 60%)

/ / equivalent to the previous one

Background-image: linear-gradient (red 0% pencil red 30% reel blue 60% mai blue 100%)

[4] if the gradient colors do not have a specified position, they will be evenly distributed

CSS Code copies content to the clipboard

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

[5] if multiple colors occupy the same position, for example, a, b, and c all occupy the position of n%, then 0% color n% is the color gradient of the former color and a color; then there is a color mutation of the a color and c color of n% color n%; n% Muk 100% is the color gradient of the c color and the latter color. Therefore, the middle b is useless

CSS Code copies content to the clipboard

Background-image: linear-gradient (red,yellow 50% MagneWhite50% Magazine 50% mai blue)

/ / equivalent to the previous one

Background-image: linear-gradient (red,yellow 50% Magazine black 50% Mague blue)

Repeat gradient

Repetitive gradients can achieve the repetitive effect of linear gradients, make the color marks infinitely repeated in the direction of the gradients, and achieve some special effects.

[note] the repeated gradient takes effect only when the position of the first and last colors is not at 0% or 100%.

CSS Code copies content to the clipboard

Background-image:-webkit-repeating-linear-gradient (blue 20% green 50%)

Background-image: repeating-linear-gradient (blue 20% green 50%)

Paper effect

Use repeated gradients to achieve the effect of horizontal paper

CSS Code copies content to the clipboard

Div {height: 200px; width:200px; font: 14px/20px 'Song style'; text-indent: 2em; background-image:-webkit-repeating-linear-gradient (# f9f9f9f9); background-image: repeating-linear-gradient (# f9f9f9f9));}

Multiple backgrounds

Use the multi-background attribute to add the transparent effect of the gradient to the picture using the gradient color with transparency

CSS Code copies content to the clipboard

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

Application scenario

In the CSS style, gradients are equivalent to background images and can theoretically be used wherever the url () value is used. Such as the most common background-image, list-style-image, and border-image. But so far, it has only been perfectly supported in the background picture.

[1] background-image

CSS Code copies content to the clipboard

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 background-size, and the default is padding box.

[2] list-style-image

CSS Code copies content to the clipboard

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, and the default is 1em.

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

I am the word.

[3] border-image

CSS Code copies content to the clipboard

-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, and safari browsers always implement the representation with fill parameters.

IE compatible

IE9- browsers do not support this property, but you can use IE's quasi-proprietary filter syntax for compatibility

CSS Code copies content to the clipboard

Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr='#color', endColorstr='#color'); GradientType represents the gradient direction, 0 is vertical (default), 1 is horizontal

# color stands for color stop. The format is # aarrggbb, where aa is transparent and rrggbb is the color of rgb mode.

The default value for startColorstr is # ff0000ff

The default value for endColorstr is # ff000000

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

CSS Code copies content to the clipboard

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

On the linear gradient in CSS linear-gradient how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.