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

在下面的示例中，我们有一个带有类名 ‘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>使用不同的 CSS 属性在文本中添加轮廓效果</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>使用不同的 CSS 属性在文本中添加轮廓效果</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-offset，第二个值是 y-offset，第三个值是模糊值，第四个值是阴影颜色。

示例3

在下面的示例中，div 元素包含文本。在 CSS 中，我们将背景颜色和字体颜色设置为相同。之后，我们使用 ‘text-shadow’ CSS 属性添加轮廓效果。这里，我们使用了 4 对 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>使用 'text-shadow' CSS 属性在文本中添加轮廓效果</h2>
   <div class="text">欢迎来到 TutorialsPoint！</div>
</body>
</html>

在 `<SVG>` 标签中添加文本并将轮廓应用于文本

在这里，我们将文本转换为 SVG 图像。之后，我们将使用各种 CSS 属性设置轮廓的颜色、填充颜色、轮廓宽度等来向文本添加轮廓效果。

语法

用户可以使用以下语法将文本转换为 SVG 并通过各种 CSS 属性向文本添加轮廓效果。

paint-order: stroke;
fill: color;
stroke: color;

在上面的语法中，我们为文本设置了填充颜色。同样地，我们为文本设置了描边颜色。‘paint-order：stroke’ CSS 属性允许我们在 strokeWidth 和 fill 重合在一起交叉处重叠时重叠描边颜色。

示例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>在文本中添加轮廓效果</h2>
   <svg viewBox="0 0 490 100">
      <text class="text" x="10" y="45">此文本位于 SVG 元素中</text>
   </svg>
</body>
</html>

我们已经看到了三种方法向文本添加轮廓效果，第一种方法使用三种不同的 CSS 属性更改文本的填充颜色并设置文本的描边，第二种方法显示“text-shadow” 而不是文本，第三种方法将文本转换为 SVG 并使用与 SVG 相关的各种 CSS 属性为文本添加轮廓效果。