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

Xiaobian to share with you how many kinds of gradients in CSS Gradient, I believe most people still do not know how to, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Linear gradient, color values gradually transition along an implicit straight line.

Produced by linear-gradient().

To create a linear gradient, you must define at least two color nodes. Color nodes are the colors you want to present a smooth transition. Also, you can set a starting point and a direction (or an angle).

/* Gradient axis is 45 degrees, from blue to red */linear-gradient(45deg, blue, red);/* Gradient from bottom right to top left, from blue to red */linear-gradient(to left top, blue, red);/* Gradient from bottom to top, from blue to 40% of height, green gradient starts and ends in red */linear-gradient(0deg, blue, green 40%, red);

2. Radial gradient, the color value of the image spreads outward from the center point (origin) and gradually transitions to other color values.

You also need to define at least two color nodes. You can also specify the center of the gradient (default at the center point, center), shape (default elliptical ellipse), and size (default farthest-corner, indicating the farthest corner).

syntax

radial-gradient( [shape size at position] ? [ , ]+)

Repeat the gradient, repeating the gradient pattern multiple times until enough to fill the specified element.

Produced by repeating-linear-gradient() and repeating-radial-gradient() functions.

The repeat function has the same parameters as above, except that it repeats based on multiples of the gradient length (distance between the last color scale and the first).

.linear-repeat { background: repeating-linear-gradient( to top left, lightpink, lightpink 5px, white 5px, white 10px );}.radial-repeat { background: repeating-radial-gradient( powderblue, powderblue 8px, white 8px, white 16px );} The above is all the content of "How many gradients are there in CSS", thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to 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.