Can you add text strokes in css3?-CSS Tutorial-php.cn

Can you add text strokes in css3?

青灯夜游

Release： 2021-12-15 16:15:35

Original

3549 people have browsed it

css3 can add strokes. Method: 1. Use the text-shadow attribute to achieve the stroke effect by adding text shadow around the text; 2. Use the text-stroke attribute. The syntax "text-stroke: stroke" Edge width color;"; 3. Use SVG to add strokes to the text.

Can you add text strokes in css3?

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

text-shadow text stroke

text-shadow: Sets a shadow to the text.

text-shadow:color||length||length||opacity

Copy after login

color: Specify the color.
length: The first length specifies the extension distance of the shadow in the horizontal direction, and the second length specifies the extension distance of the shadow in the vertical direction, which can be a negative value.
opacity: Specifies the distance of the shadow blur effect.

The direction order represented by the four attribute values separated by commas is lower right, upper left.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>text-shadow-文字描边</title>
		<style>
			.demo {
				height: 200px;
				text-align: center;
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
				background: peru;
				color: #000;
			}
			
			.stroke {
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>没有添加描边</p>
			<p class="stroke">添加了字体描边</p>
		</div>
	</body>

</html>

Copy after login

Can you add text strokes in css3?

text-stroke Text stroke

There is a property specifically used for text stroke in CSS-webkit-text-stroke, you can control the width and color of the stroke, for example

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

Copy after login

The effect is as follows

Can you add text strokes in css3?

##There is indeed a stroke, but the text seems to be thinner , if you feel it is not obvious, you can set it larger

Can you add text strokes in css3?

As you can see from here,

-webkit-text-stroke is actually The stroke is centered and covers the text, and the stroke method cannot be changed. In fact, many design tools allow you to choose the stroke method, such as figma

Can you add text strokes in css3?

So, how to achieve the outer stroke effect?

it is also fine! Just use two layers of text, one layer of text stroke, and one layer of text gradient. In order to save labels, you can use pseudo elements to generate

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

Copy after login

::beforeSet the gradient, located above , set the stroke of the original text, 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;
}

Copy after login

The overlay is as follows

Can you add text strokes in css3?

Changing different strokes will not cause the text to become "thinner"

Can you add text strokes in css3?

SVG Text Stroke

SVG can also achieve a stroke effect, which is similar to CSS. It should be said that CSS draws lessons from SVG, and controls the stroke color and size through

stroke and stroke-width, such as

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

Copy after login

You can get such an effect

Can you add text strokes in css3?

The performance is the same as CSS, it is a centered stroke and cannot be changed.

The difference is that SVG control is more flexible.

The default is to fill first and then stroke, so it looks like the stroke is above the fill, but we can change this According to this rule, if you set the stroke first and then the fill, then the fill color will cover the stroke. Changing this rule in SVG can be set by paint-order.

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

Copy after login

This achieves the outer stroke effect. Is it much more convenient than CSS?

Can you add text strokes in css3?

(Learning video sharing:

css video tutorial)

The above is the detailed content of Can you add text strokes in css3?. For more information, please follow other related articles on the PHP Chinese website!