迹忆客 专注技术分享

本文将介绍一种借助 CSS 对 HTML 中的文本进行轮廓化的方法。

使用 text-shadow CSS 属性为 HTML 中的文本提供轮廓

text-shadow 是一个给文本添加阴影的 CSS 属性。它以逗号分隔的阴影列表作为值，每个阴影包含 X 偏移、Y 偏移、模糊半径和颜色。

例如，如果一个文本有一个 tet-shadow 属性 1px 1px 3px black，这意味着文本的文本阴影的 X-offset 为 1px，Y-offset 为 1px，模糊半径为 3px 并具有 black 颜色。X-offset 和 Y-offset 负责文字阴影的方向，X-offset 代表水平方向的阴影，而 Y-offset 代表垂直方向的阴影。

模糊半径定义了从文本到要模糊阴影的距离。为了给文本一个完整的轮廓，我们必须设置多个 text-shadow 值，因为文本在每个方向都有一个轮廓。

例如，创建一个 <div> 并在其中写入随机文本，并给 <div> 一个类名 outline。在 CSS 中，选择类 outline。

将其 color 属性设置为 white。接下来，将 div 的 text-shadow 属性设置为 -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black;。

在这里，我们为 text-shadow 属性应用了四对值。它在所有方向上创建文本的轮廓，我们使用 0 作为模糊半径，因为我们不希望文本模糊。

偏移值也接受负值。X 偏移的负值将在左侧创建阴影，而负 Y 偏移将在文本顶部创建阴影。

我们还将文本的颜色设置为白色，将阴影设置为黑色，以便文本和轮廓在白色背景上可见。

代码 - HTML：

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

代码 - CSS：

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

因此，我们可以使用 CSS text-shadow 属性在 HTML 中给出文本的轮廓。