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

In this article Xiaobian for you to introduce in detail "how to achieve linear gradient effect in CSS", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to achieve linear gradient effect in CSS" article can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

Linear-gradient

1. Grammar

Linear-gradient ([[to |],]?, [,...]?)

-webkit-linear-gradient ([[|],]? [,...]?)

These two kinds are different in use and expression. When using direction, the former should take to, while the latter does not; when using angle, the performance is inconsistent.

1) default

Both are from top to bottom by default

Background-image:linear-gradient (# 00ffff, # ff1493, # 006699); background-image:-webkit-linear-gradient (# 00ffff, # ff1493, # 006699)

2): [left | right] | [top | bottom]

The two behave in the opposite direction.

Background-image:linear-gradient (to left, # 00ffff, # ff1493, # 006699); background-image:-webkit-linear-gradient (left, # 00ffff, # ff1493, # 006699)

Background-image:linear-gradient (to left top, # 00ffff, # ff1493, # 006699); background-image:-webkit-linear-gradient (left top, # 00ffff, # ff1493, # 006699)

3) the use of

The corresponding relationship between degree and direction. The corresponding direction of-webkit- is 450 °- angle.

Background-image:linear-gradient (275deg, # ff1493, # 000000, # 006699); background-image:-webkit-linear-gradient (175deg, # ff1493, # 000000, # 006699)

450 °- 175 °= 275 °, so the two are consistent, as shown in the following figure:

4) use of =

Stop can use a percentage or a specific value to indicate that the color is saturated at this position

Background-image:linear-gradient (to right, # ff1493 10%, # 000000 40%, # 006699 60%); background-image:-webkit-linear-gradient (to right, # ff1493 10%, # 000000 40%, # 006699 60%)

From the picture above, you can see the process of color change:

0%-> 10%: # ff1493 has been saturated

10%-> 40%: # ff1493 gradients to # 000000, at 40%, # 000000 reaches saturation

40%-> 60%: # 000000 gradually becomes # 006699, at 60%, # 006699 reaches saturation

60%-> 100%: # 006699 has been saturated

Using this feature, you can draw stripes.

Background-image:linear-gradient (to right, # ff1493 33%, # 000000 33%, # 000000 66%, # 006699 66%); background-image:-webkit-linear-gradient (to right, # ff1493 33%, # 000000 33%, # 000000 66%, # 006699 66%)

Note: stop can also set two values at the same time, such as linear-gradient (to right, # ff1493 0. 33%, # 000000 33%, # 006699 66%);-webkit-linear-gradient (to right, # ff1493 33%, # 000000 33%, # 006699 66%); the effect is consistent with the above figure.

If the value of the latter is less than the former, the former shall prevail. The following 20px is less than 60px, and the actual display by 60px shows the effect as shown below:

Background-image:linear-gradient (right, # ff1493 60px, # 000000 20px); background-image:-webkit-linear-gradient (right, # ff1493 60px, # 000000 20px)

Extension 1: gradient Center

The default is the center of two colors, but we can set its gradient center

/ * 3 colors are divided equally, and the gradient center is 1 ff1493 3 and 2 pm 3 * / background-image:linear-gradient (to right, # ff1493, # 000000, # 006699); / * the gradient center is 10% and 20% * / background-image:linear-gradient (to right, # ff1493, 10%, # 000000, 20%, # 006699)

Note:-webkit-linear-gradient does not support this usage

Extension 2: repeating-linear-gradient

We can use attributes to draw duplicate color blocks.

Background-image:repeating-linear-gradient (0deg, # ff1493, # 000000 10px, # 006699 20px); background-image:-webkit-repeating-linear-gradient (0deg, # ff1493, # 000000 10px, # 006699 20px)

2. Common styles

(1) multicolor starry sky

Background-image: linear-gradient (45deg, rgba (255,0,76,0.7), rgba (0,0,255,0), linear-gradient (135deg, rgba (106,0128,1), rgba (0,128,0,0) 80), linear-gradient (225deg, rgba (0255,255,1), rgba (0255,255,0) 80), linear-gradient (315deg, rgba (255,192,203,0.7), rgba (255,192,203,0.7) 203, 0) 80%)

Set multiple values at the same time to make the whole background color look gorgeous

(2) Lattice pattern

Background-image: repeating-linear-gradient (0deg, rgba (0,255,255,0.3) 0px 5px, transparent 5px 10px), repeating-linear-gradient (90deg, rgba (0,255,255,0.3) 0px 5px, transparent 5px 10px); background-image: repeating-linear-gradient (45deg, rgba (0255,255,0.3) 0px 5px, transparent 5px 10px), repeating-linear-gradient (135deg, rgba (0255,255,0.3) 0px 5px, transparent 5px 10px)

Alternate rendering with color and transparent color

(3) Border gradient

# wrap {width: 180px; height: 40px; border: 5px solid transparent; border-image: linear-gradient (45deg, aqua, pink, purple) 1;}

The internal background is transparent, but setting border-radius is not supported

# wrap {width: 180px; height: 40px; border: 5px solid transparent; border-image: linear-gradient (45deg, aqua, pink, purple) 1; clip-path: inset (0 round 5px);}

Note: you can use clip-path to cut fillets, but this method is not suitable for fillets with large angles.

# wrap {width: 180px; height: 40px; border-radius: 20px; background: # FFF; position: relative;} # wrap::before {content:'; position: absolute; left:-5px; right:-5px; top:-5px; bottom:-5px; background-image: linear-gradient (45deg, aqua, pink, purple); border-radius: 25px Z-index:-1} / * or * / # wrap {width: 180px; height: 40px; border-radius: 20px; background: # FFF; position: relative; border: 5px solid transparent; background-origin: border-box; background-image: linear-gradient (# FFF, # FFF), linear-gradient (45deg, aqua, pink, purple); background-clip: padding-box, border-box;} / * or * / # wrap {width: 180px Height: 50px; border: 5px solid transparent; border-radius: 25px; background-image: linear-gradient (45deg, aqua, pink, purple); background-origin: border-box;} # content {width: 100%; height: 100%; border-radius: 20px; background: # FFF;}

All of these methods can achieve the fillet gradient border, but can not make the internal background transparent.

(4) text gradual change

Darker CMJ#wrap {font-size: 40px; line-height: 40px; font-weight: bold; background-clip: text;-webkit-background-clip: text; / / color: transparent;-webkit-text-fill-color: transparent; background-image: linear-gradient (45deg, aqua, pink, purple);}

Background-clip specifies the drawing area of the background. We set its value to text, that is, draw in the text area, and then set the text color or-webkit-text-fill-color to a transparent color, and the gradient area can be displayed.

Read here, this "how to achieve linear gradient effect in CSS" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.