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

This article mainly explains "how to bolster and frame the text twice by CSS". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to bolster and frame the text twice by CSS"!

This article will explain how to implement it through an actual business requirement.

Bold and border effect of text in extreme scenes

The effect of multiple borders of text

Demand background-the second bold of the text

There is an interesting question today:

In the text display, the use of font-weight: bold to bold the text, but I think it is still not thick enough, is there any way to make the text a little thicker?

Emm, regardless of compatibility, the answer is to use the-webkit-text-stroke attribute of the text to bold the text twice. (learn video sharing: css video tutorial)

MDN-webkit-text-stroke: this attribute adds a border (stroke) to the text character and specifies the width and color of the border, which is an acronym for the-webkit-text-stroke-width and-webkit-text-stroke-color attributes.

Looking at the DEMO below, we can use-webkit-text-stroke to bold the text twice:

Text bold CSS

Text bold CSS

Text bold CSS

Text bold CSS

P {font-size: 48px; letter-spacing: 6px;} p:nth-child (2) {font-weight: bold;} p:nth-child (3) {- webkit-text-stroke: 3px red;} p:nth-child (4) {- webkit-text-stroke: 3px # 000;}

Compare the following four types of text, and the last one uses font-weight: bold and-webkit-text-stroke to make the text thicker.

CodePen Demo-- font-weight: bold and-webkit-text-stroke twice bold text

Https://codepen.io/Chokcoco/pen/gOxwEvo

How to add a border to the second bold text?

OK, completed the first step above, the matter is not over, there is a more terrible problem.

Now add a different color border to the text in the case of secondary bold.

We used the-webkit-text-stroke attribute, which could have added a border to the text, and things got a little tricky. This question can also be turned into, how to add two different color borders to the text?

Of course, this is not difficult to beat the powerful CSS (SVG), let's try it.

Try method 1: use the pseudo elements of the text to enlarge the text

The first attempt is a bit troublesome. We can refine each text, use the pseudo elements of the text to enlarge the text a little bit, and attach the original text to the text after the visit.

Split the text into a separate element for processing

Using the attr () property of pseudo elements, the pseudo elements of elements are used to realize the same word.

Enlarge the words of pseudo elements

Superimposed under the original text

The above code:

Bold C S Sul {display: flex; flex-wrap: nowrap;} li {position: relative; font-size: 64px; letter-spacing: 6px; font-weight: bold;-webkit-text-stroke: 3px # 000; &: before {content: attr (data-text); position: absolute; top: 0; left: 0; bottom: 0 Right: 0; color: red;-webkit-text-stroke: 3px # f00; z-index:-1; transform: scale;}}

You can simply animate the above effect and you can understand it at a glance:

CodePen Demo-use pseudo elements to add borders to bold text

Https://codepen.io/Chokcoco/pen/ExvgLNm

It looks good, but in fact, when you look at it carefully, the border effect is very rough, and every part of the text is not covered regularly, so the effect is not acceptable:

Try method 2: use text-shadow to simulate the frame

The first method failed, and we went on to try the second way, using text-shadow to simulate the border.

We can add a text shadow to the secondary bold text:

Text bold CSS

P {font-size: 48px; letter-spacing: 6px; font-weight: bold;-webkit-text-stroke: 1px # 000; text-shadow: 00 2px red;}

Look at the effect:

Well, it's too far from the frame. It's a shadow.

But don't worry, text-shadow supports multiple shadows. Let's overlay the above text-shadow several times:

P {font-size: 48px; letter-spacing: 6px; font-weight: bold;-webkit-text-stroke: 1px # 000;-text-shadow: 00 2px red; + text-shadow: 00 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;}

Wow, if you don't look carefully, using this way of overlaying multi-layer text-shadow, it really looks like a frame!

Of course, if we zoom in, the flaw is more obvious, and we can still see that it is a shadow:

CodePen Demo-use text-shadow to add borders to text

Https://codepen.io/Chokcoco/pen/porEVeg

Try method 4: use multiple drop-shadow ()

After trying text-shadow, it is natural to think of multiple filter: drop-shadow (), which is subjectively consistent with the effect of multiple text-shadow.

However, true knowledge comes from practice.

In the actual test, it is found that the effect of using filter: drop-shadow () is better than that of multiple text-shadow, and the sense of fuzziness is weaker:

P {font-weight: bold;-webkit-text-stroke: 1px # 000000 Filter: drop-shadow (0 0.25px red) drop-shadow (0 000) .25px red) drop-shadow (0 0.25px red) }

The effect is as follows:

We can even use it to make multiple borders with secondary bold text:

P {font-weight: bold;-webkit-text-stroke: 1px # 000; filter: drop-shadow (00 0.2px red) / / repeat N times drop-shadow (00 0.2px red) drop-shadow (00 0.25px blue) / / repeat N times drop-shadow (00 0.25px blue);}

The effect is as follows:

However, the performance of drop-shadow () varies greatly under different screens (high-definition screen and normal screen), and it is actually embarrassing to reuse.

Is there nothing we can do? No, there is the ultimate killer mace SVG.

Try method 4: use the SVG feMorphology filter to add borders to the text

In fact, the use of SVG's feMorphology filter, can be very perfect to achieve this requirement.

This skill, I am interesting! The generation scheme of irregular borders is also mentioned in this article.

Use the expansibility of feMorphology to add borders to irregular shapes.

Go directly to the code:

Text bold CSS

P {font-size: 64px; letter-spacing: 6px; font-weight: bold;-webkit-text-stroke: 2px # 000; filter: url (# dilate);}

The effect is as follows:

We can use the radius in the SVG feMorphology filter to control the border size, and the flood-color in the feFlood filter to control the border color. Moreover, the SVG code here can be placed at will, as long as it is introduced in CSS using filter.

This article does not explain too much about the SVG filter. If you are interested in the principle of the SVG filter, you can refer to the article I mentioned above.

So far, we have perfectly realized the need to add a different color border to the text on the basis of already using font-weight: bold and-webkit-text-stroke.

If you zoom in, you can see that the border generated in this way is a real border without any blur:

CodePen Demo-use SVG feMorphology filter to add borders to text

At this point, I believe you have a deeper understanding of "CSS how to bolster and frame the text twice". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.