简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  What is the text outline effect?

What is the text outline effect?

WBOY
WBOYforward
2023-08-23 21:25:021272browse

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;

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>

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

Add text within the tag and apply a stroke to the text

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 of

Example 4

is:

Example 4

In the example below, we use the HTML tag to create an HTML element and the HTML tag to add text within the SVG. In the CSS, we set 'stroke-width' to 3px to show a 3px outline, and 'stroke-linejoin' to round so that whenever two lines connect, they join in a circle. Additionally, we use 'fill: white' to set the text color to the same color as the background, and 'stroke' to display the text as a brown outline. 

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

css html webkit
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to select multiple files using HTML input tags?Next article：How to select multiple files using HTML input tags?

Related articles

See more