在 html 中勾勒文本-ag捕鱼王app官网

vue react javascript angular css html

在 html 中勾勒文本

作者：迹忆客最近更新：2023/03/22 浏览次数：

本文将介绍一种借助 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 值，因为文本在每个方向都有一个轮廓。

例如，创建一个

并在其中写入随机文本，并给

一个类名 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 中给出文本的轮廓。

text shadow can be used to give an outline to the text.

上一篇：在 html 正文中显示 javascript 变量

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

在 html 中勾勒文本-ag捕鱼王app官网