What is the text outline effect?-CSS Tutorial-php.cn

What is the text outline effect?

WBOY

Release： 2023-08-23 21:25:02

forward

1304 people have browsed it

What is the text outline effect?

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;

Copy after login

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 of

Example 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>

Copy after login

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>

Copy after login

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;

Copy after login

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 translation

In 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>

Copy after login

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;

Copy after login

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 of

Example 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>

Copy after login

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!