Home > Article > Web Front-end > What is the text outline effect?
What is the text outline effect?
- WBOYforward
- 2023-08-23 21:25:021287browse
Sometimes, we need to show only the outline of the text and remove the padding of the text. It can also be said to be a contour effect.
We can use various CSS properties to generate outline effects for text. For example, we can add a border to the text, remove the fill color of the text, and add an outline effect to the text.
Here, we use three different methods of HTML and CSS to display text with outline effect.
Use various CSS properties
In this method, we will use three CSS properties to add an outline effect to the text. The first one is "-webkit-text-fill-color" which changes the fill color of the text to be the same as the background color. The second is "-webkit-text-lines-width", which adds a stroke width to the text, and the third CSS property is "-webkit-text-lines-color", which adds an outline color to the text.
grammar
Users can use three different CSS properties to add outline effects to text according to the following syntax.
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
In the above syntax, we set the fill color and stroke width of the text, and the stroke represents the outline color.
The Chinese translation ofExample 1
is:Example 1
In the example below, we have a div element with class name 'text1' which contains some text. We have set the font size of the text in CSS. Additionally, to add an outline effect to the text, we set a fill color of white, a stroke width of '1px' and a stroke color of 'blue' to show a blue outline.
In the output, the user can observe the text with a blue outline.
<html>
<head>
<style>
.text1 {
font-size: 50px;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
<div class = "text1">This text has a default background.</div>
</body>
</html>
Example 2
is translated as:Example 2
In the example below, we set a red background for the div element. Next, we use 'red' as the fill color, making the fill color the same as the background. Here, the stroke width is '1.2px' and the stroke color is 'yellow'.
In the output, the user can observe text with a yellow outline on a red background.
<html>
<head>
<style>
.text {
font-size: 50px;
width: 600px;
height: auto;
background-color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
<div class = "text"> This text has a red background. </div>
</body>
</html>
Use the “Text-shadow” CSS property
In this method, we will use the "text-shadow" CSS property to generate an outline effect for the text. If we hide the text by setting the same text color as the background color, and only show the text shadow, we can generate an outline effect.
grammar
Users can use the "text-shadow" CSS property to add an outline effect to text according to the following syntax.
text-shadow: x-offset y-offset blur color;
The "text-shadow" property takes 4 different values to set the shadow. The first is the x offset, the second is the y offset, the third is the blur value, and the fourth is the shadow color.
Example 3
can be kept without translationIn the example below, the div element contains text. In CSS, we set the background color and font color to be the same. Then, we used the 'text-shadow' CSS property to add the outline effect. Here, we have used 4 versus 4 values for the 'text-shadow' value. The first pair is for the right shadow, the second pair is for the lower shadow, the third pair is for the left shadow, and the last pair is for the upper shadow.
Actually, it shows the text shadow instead of the stroke, producing an outline effect.
<html>
<head>
<style>
.text {
color: rgb(117, 117, 235);
font-size: 50px;
background-color: rgb(117, 117, 235);
text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
}
</style>
</head>
<body>
<h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>
Add text within the
Here we convert text to SVG image. After that, we will set the stroke color, fill color, stroke width, etc., and use various CSS properties to add an outline effect to the text.
grammar
Users can follow the following syntax to convert text to SVG to add an outline effect to the text.
paint-order: stroke; fill: color; stroke: color;
In the above syntax, we set the fill color of the text. Additionally, we set the stroke color of the text. The “paint-order: stroke” CSS property allows us to overlap fill colors via strokes when the fill colors intersect each other.
The Chinese translation ofExample 4
is:Example 4
In the example below, we use the
<html>
<head>
<style>
svg {
font-size: 35px;
width: 490px;
height: 100;
}
.text {
stroke-width: 3px;
stroke-linejoin: round;
paint-order: stroke;
fill: white;
stroke: brown;
}
</style>
</head>
<body>
<h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
<svg viewBox = "0 0 490 100">
<text class = "text" x = "10" y = "45"> This text is in the svg element </text>
</svg>
</body>
</html>
We've seen three ways to add an outline effect to text. The first method uses three different CSS properties to change the text's fill color and set the text's stroke.
The second method displays a "text shadow" instead of displaying text. The third method converts the text to SVG and adds an outline effect to the text using various SVG-related CSS properties.
The above is the detailed content of What is the text outline effect?. For more information, please follow other related articles on the PHP Chinese website!