在 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
。接下来,将 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 中给出文本的轮廓。