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

This article is about how css achieves the effect of gradual discoloration of each line of a paragraph. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Target effect

Seeing the above effect, I think the first thing that many people will think of is background-clip:text, color:transparent and linear-gradient to complete. So is that the truth?

How to complete the gradient effect of each line of text in a paragraph

For those of you who know CSS, use:

Background-image: linear-gradient (to right, deeppink, dodgerblue);-webkit-background-clip: text;color: transparent

You can easily achieve the gradient filling effect of a text. For example, the following example:

To do a small experiment, what would be the effect if the text was not a single word or a single line but an entire paragraph?

The effect also seems to be perfect. If you change the parameters of the gradient effect, the gradient effect is a bevel:

Background-image: linear-gradient (135deg, deeppink, dodgerblue)

Look at the effect of both:

If you take a closer look, there are differences between the two effects. First, let's take a look at the same size container (the p element in this example, whose size is 765px * 165px). For two different gradient effects, let's first look at the filling effect of to right:

Let's take a look at the filling effect of 135deg:

At this point, you may know how the previous example is different? And do you know why? How do we achieve this if we want various gradients to have the same effect on each line of a paragraph? Before implementing it, let's briefly summarize:

Using to right or to left in linear-gradient, whether it is a single word, single-line text, or multiple lines of text, the text filling effect will be the same. However, for other gradient angle parameters, the effect of each line in many lines of text filling will be different.

Back to the point? How to achieve multiple lines and have the same effect regardless of any filling angle? There is a key attribute to achieve this effect: box-decoration-break. To put it simply, the box-decoration-break attribute has two property values: slice and clone, and the corresponding effect is as follows:

Used in a paragraph, the effect is as follows:

Are we getting closer and closer to our goal? So use this property box-decoration-break:clone for our example:

Background-image: linear-gradient (135deg, deeppink, dodgerblue); background-clip: text;-webkit-background-clip: text;box-decoration-break: clone;-webkit-box-decoration-break: clone;color: transparent

The effect is as follows:

Let's check to see if it meets our expectations:

Tip: box-decoration-break is applied to inline elements with the corresponding line-height to allow a certain amount of spacing between rows.

Looking back, let's see that using box-decoration-break is the difference between inline elements and block elements:

Thank you for reading! This is the end of the article on "how to achieve the effect of gradual discoloration of each line of text in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out 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.