在 HTML 中勾勒文本

Rajeev Baniya 2023年2月19日 2022年7月12日
在 HTML 中勾勒文本

本文将介绍一种借助 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。接下来,将 divtext-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 中给出文本的轮廓。

相关文章 - HTML Text