什么是文本的轮廓效果?
有时，我们只需要显示文本的轮廓，并去除文本的填充。我们也称之为轮廓效果。
我们可以使用各种 CSS 属性为文本生成轮廓效果。例如，我们可以为文本添加边框，并去除文本的填充颜色，从而为文本添加轮廓效果。
这里，我们介绍了三种使用 HTML 和 CSS 显示具有轮廓效果的文本的方法。
使用各种 CSS 属性
在本方法中，我们将使用三个 CSS 属性为文本添加轮廓效果。第一个是"-webkit-text-fill-color"，用于将文本的填充颜色更改为与背景颜色相同。第二个 CSS 属性是"-webkit-text-stroke-width"，用于设置文本的描边宽度;第三个 CSS 属性是"-webkit-text-stroke-color"，用于设置文本的轮廓颜色。
语法
用户可以按照以下语法使用三个不同的 CSS 属性为文本添加轮廓效果。
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
在上述语法中，我们设置了文本的填充颜色、描边宽度，stroke 表示轮廓颜色。
示例 1
在下面的示例中，我们有一个类名为"text1"的 div 元素，其中包含一些文本。我们已经在 CSS 中设置了文本的字体大小。此外，为了给文本添加轮廓效果，我们设置了文本的填充颜色为白色，描边宽度为"1px"，描边颜色为"blue"，以显示蓝色轮廓。
在输出中，用户可以看到带有蓝色轮廓的文本。
<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>
示例 2
在下面的示例中，我们为 div 元素设置了红色背景。接下来，我们使用"红色"作为填充颜色，使填充颜色与背景颜色相同。此处，描边宽度为"1.2px"，描边颜色为"黄色"。
在输出中，用户可以观察到红色背景上带有黄色轮廓的文本。
<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>
使用 CSS 属性"Text-shadow"
在本方法中，我们将使用 CSS 属性"text-shadow"为文本生成轮廓效果。如果我们将文本颜色设置为与背景颜色相同的颜色，并仅显示文本阴影，即可隐藏文本，从而生成轮廓效果。
语法
用户可以按照以下语法使用 CSS 属性"text-shadow"为文本添加轮廓效果。
text-shadow: x-offset y-offset blur color;
"text-shadow"属性可以使用 4 个不同的值来设置阴影。第一个是 x 偏移量，第二个是 y 偏移量，第三个是模糊值，第四个是阴影颜色。
示例 3
在下面的示例中，div 元素包含文本。在 CSS 中，我们将背景颜色和字体颜色设置为相同。之后，我们使用 CSS 属性"text-shadow"来添加轮廓效果。这里，我们使用了 4 对值作为"text-shadow"的值。第一对表示右侧阴影，第二对表示向下阴影，第三对表示左侧阴影，最后一对表示向上阴影。
实际上，它显示的是文本阴影而不是描边，从而产生了轮廓效果。
<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>
在 <SVG> 标签内添加文本，并为文本添加描边
在这里，我们将文本转换为 SVG 图像。之后，我们将使用各种 CSS 属性设置描边颜色、填充颜色、描边宽度等，为文本添加轮廓效果。
语法
用户可以按照以下语法，通过将文本转换为 SVG 格式来为文本添加轮廓效果。
paint-order: stroke; fill: color; stroke: color;
在上述语法中，我们设置了文本的填充颜色。此外，我们还设置了文本的描边颜色。 CSS 属性 'paint-order: stroke' 允许我们在线条相交时按描边颜色叠加填充。
示例 4
在下面的示例中，我们使用了 <Svg> HTML 标签创建 HTML 元素，并使用 <text> HTML 标签在 SVG 中添加文本。在 CSS 中，我们将 'stroke-width' 设置为 3px，以显示 3px 的轮廓，并将 'stroke-linejoin' 设置为 round，这样当任何两条线连接时，它们都会以圆形连接。此外，我们使用了 'fill: white' 将文本颜色设置为与背景颜色相同，并使用 'stroke' 设置为 brown，以显示带有棕色轮廓的文本。
<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>
我们已经了解了三种为文本添加轮廓效果的方法。第一种方法使用三个不同的 CSS 属性来更改文本的填充颜色并设置文本的描边。
第二种方法显示"文本阴影"，而不是显示文本。第三种方法将文本转换为 SVG，并使用与 SVG 相关的各种 CSS 属性为文本添加轮廓效果。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
