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

This article mainly introduces "how to add text strokes in css3". In daily operation, I believe many people have doubts about how to add text strokes in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to add text strokes in css3". Next, please follow the editor to study!

Css3 can add strokes, methods: 1, use the text-shadow attribute, add text shadow around the text to achieve the stroke effect; 2, use the text-stroke attribute, syntax "text-stroke: stroke width color;"; 3, use SVG to add strokes to the text.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Text-shadow text Stroke

Text-shadow: sets shadows on text.

Text-shadow:color | | length | | length | | opacity

Color: specifies the color.

Length: the first length specifies how far the shadow extends horizontally, and the second length specifies the distance that the shadow extends vertically, which can be negative.

Opacity: specifies the range of the shadow blur effect.

The four attribute values separated by commas represent the direction in the order of lower right and upper left.

Text-shadow- text stroke .demo {height: 200px; text-align: center; font-family: Verdana; font-size: 30px Font-weight: bold; background: peru; color: # 000 } .stroke {text-shadow: # fff 1px 00, # fff 0 1px 0, # fff-1px 00, # fff 0-1px 0;}

No strokes added

Added font stroke

Text-stroke text Stroke

CSS has a special attribute for text strokes-webkit-text-stroke, which controls the width and color of the stroke, such as

.text {- webkit-text-stroke: 2px # 333;}

The effect is as follows

There is indeed a stroke, but the text seems to have lost a circle. If it is not obvious, you can set it a little bigger.

As you can see here,-webkit-text-stroke actually centers the stroke and overlays the text, and cannot change the stroke method. In fact, many design tools can choose strokes, such as figma

So, how to achieve the outer stroke effect?

It's okay, too! Use two layers of text, one layer of text stroke and one layer of text gradient. In order to save tags, pseudo elements can be used to generate

Custom-made for you to find wonderful

:: before setting gradient, located at the top, the original text setting stroke, located below, pay attention to remove the-webkit-text-stroke of:: before

.text:: before {content: attr (data-title); position: absolute; background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-text-stroke: 0;} .text {- webkit-text-stroke: 6px # 333;}

The overlay is as follows

Changing different strokes will not cause the text to "get thinner".

SVG text Stroke

SVG can also achieve the stroke effect, which is similar to CSS. It should be said that CSS borrows from SVG and controls the stroke color and size through stroke and stroke-width, such as

.text {/ * other * / stroke-width: 4px; stroke: # 333;}

You can get this effect.

Like the CSS performance, they are centered strokes and cannot be changed.

The difference is that SVG control is more flexible, the default is to fill, and then stroke, so it seems that the stroke is on top of the fill, but we can change this rule, set the first stroke, and then fill, then the fill color will overlay the stroke. Those who change this rule in SVG can be set through paint-order.

.text {/ * other * / stroke-width: 4px; stroke: # 333; paint-order: stroke; / * edge first * /}

This achieves the effect of external strokes, which is much more convenient than CSS?

At this point, the study of "how to add text strokes to css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.