What is the repeating gradient in css3? how to use? (code example)

The content of this article is to introduce to you what is the repeated gradient of CSS3? how to use? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s introduceWhat is a repeating gradient?

In addition to linear gradient [linear-gradient()] and radial gradient [radial-gradient()], in CSS3, repeated gradients can also be implemented. Repeating gradients in css3 can be divided into two types:

Repeating linear gradient: repeating-linear-gradient()

Repeating radial gradient: repeating-radial-gradient()

Next, let’s take a look at how two repeating gradients are used through a simple code example.

Repeat gradient. When rendering, the end color will repeat infinitely in both directions, and their positions will be the difference between the position of the last specified end color and the position of the first specified end color. multiple shift. For example, repeating-linear-gradient(red 10px, blue 50px) is equivalent to linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...). Note that the last stop color and the first stop color always coincide at the boundary of each group, which will produce sharp transitions if the gradient does not start and end with the same color.

In fact, the syntax of repeating gradients is the same as that of non-repeating gradients. Example:

repeating-linear-gradient(red, blue 20px, red 40px);

Rendering:

##

repeating-radial-gradient(red, blue 20px, red 40px);

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);

If the distance between the first stop color and the last stop color is not zero, but is small enough to know the physical resolution of the output device Not faithful enough to render a gradient, but to achieve the effect it is necessary to find the average color of the gradient and render the gradient into a solid color image equal to the average color.

If the distance between the first and last terminating colors is zero (or rounded to zero due to implementation limitations), then the average color of the gradient with the same number and terminating colors must be found, but for The first and last terminating colors must stop at any non-zero distance, with the remaining colors maintaining equal intervals between them. It must then render the gradient into a solid color image equal to the average color.

If the ending shape of a repeating radial gradient has a non-zero width and a height of zero, or close to zero, the implementation must find The average color of the gradient and renders the gradient as a solid color image equal to the average color.

We can

find the average color of the gradient through the following steps:

1. Define the list as an initial empty list of RGBA colors, and define the total length as the first The distance between the first and last color.

2. For each pair of adjacent color patches, define the weight as half the distance between the two color patches divided by the total length. Add two lists of entries, the first is obtained by the color representing the first color stop in RGBA and scales all components by weight, the second is obtained by the second color stop in the same way.

3. Sum the entries of the list in order to generate the average color and return it.

Summary: The above is all the content introduced in this article, I hope it will be helpful to everyone's study.

The above is the detailed content of What is the repeating gradient in css3? how to use? (code example). For more information, please follow other related articles on the PHP Chinese website!