极客笔记CSS 什么是文本的轮廓效果
有时候，我们只想显示文本的轮廓而不显示填充。我们也可以称之为轮廓效果。
我们可以使用各种CSS属性为文本添加轮廓效果。例如，我们可以为文本添加边框并移除文本的填充色以添加轮廓效果。
在这里，我们有三种不同的方法来使用HTML和CSS显示带有轮廓效果的文本。
使用各种CSS属性
在这个方法中，我们将使用三个CSS属性为文本添加轮廓效果。第一个属性是’ -webkit-text-fill-color’，用于将文本的填充颜色改变为与背景颜色相同。第二个属性是’ -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;
在上面的语法中，我们设置了文字的填充颜色、描边宽度和描边颜色，意指边框颜色。
示例1
在下面的示例中，我们有一个class属性为”text1″的div元素，其中包含一些文本。我们在CSS中设置了文本的字号。此外，为了给文本添加一个轮廓效果，我们设置了白色填充颜色、1像素的描边宽度和蓝色描边颜色，以展示蓝色的轮廓线。
在输出中，用户可以看到带有蓝色轮廓线的文本。
<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元素的红色背景。接下来，我们使用’red’作为填充颜色，使填充颜色与背景相同。在这里，描边宽度为’1.2px’，描边颜色为’yellow’。
在输出中，用户可以观察到红色背景上的带有黄色轮廓的文本。
<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>
使用‘Text-shadow’ CSS属性
在这种方法中，我们将使用‘text-shadow’ CSS属性为文本生成一个轮廓效果。如果我们将文字颜色设置为背景颜色，并只显示文字阴影，就可以生成轮廓效果。
语法
用户可以按照下面的语法使用‘text-shadow’ CSS属性为文本添加轮廓效果。
text-shadow: x-offset y-offset blur color;
‘text-shadow’ 属性接受 4 个不同的值来设置阴影。第一个是 x 偏移量，第二个是 y 偏移量，第三个是模糊值，第四个是阴影颜色。
示例3
在下面的示例中，div 元素包含文本。在 CSS 中，我们设置了相同的背景色和字体颜色。然后，我们使用了 ‘text-shadow’ CSS 属性添加了一个轮廓效果。在这里，我们使用了 4 对 4 个值作为 ‘text-shadow’ 的值。第一对是右边的阴影，第二对是向下的阴影，第三对是向左的阴影，最后一对是向上的阴影。
实际上，它显示的是 ‘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图像。之后，我们会使用各种CSS属性来设置描边颜色、填充颜色、描边宽度等，给文本添加轮廓效果。
语法
用户可以按照下面的语法将文本转换为SVG，并给文本添加轮廓效果。
paint-order: stroke;
fill: color;
stroke: color;
在上述语法中，我们设置了文本的填充颜色。此外，我们为文本设置了描边颜色。”paint-order: stroke” CSS属性允许我们在填充颜色与描边相交时重叠描边颜色。
示例4
在下面的示例中，我们使用
<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属性来改变文本的填充颜色并设置文本的描边。
第二种方法显示“text-shadow”而不是显示文本。第三种方法将文本转换为SVG，并使用与SVG相关的各种CSS属性来为文本添加轮廓效果。