迹忆客 专注技术分享

本篇文章将介绍在 CSS 中为字体应用边框和颜色的方法。

在 CSS 中使用 -webkit-text-stroke 属性为字体应用边框

我们可以在文本上使用 text-stroke 属性来为 CSS 中的字体应用边框。我们需要在 text-stroke 属性之前使用 webkit 前缀才能使用该功能。但是，它仅适用于基于 web-kit 的浏览器，例如 Safari 和 Chrome。text-stroke 属性让我们可以在矢量绘图应用程序（如 Adob​​e Illustrator）中装饰文本。该属性是其他两个属性 text-stroke-width 和 text-stroke-color 的简写。因此，我们可以使用 text-stroke 属性定义文本边框的宽度和颜色。

例如，在 HTML 中的 h1 标签内写入一些文本。在 CSS 中，选择 h1 标签并应用 -webkit-text-stroke 属性。将宽度设置为 1px，颜色设置为 red。然后，使用 font-family 属性将字体设置为 arial，并赋予 green 颜色。

下面的示例将显示一个带有红色边框的绿色文本。这就是我们如何在具有不同颜色的字体中设置边框。

示例代码：

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

在 CSS 中使用 text-shadow 属性为字体应用边框

我们可以使用 text-shadow 属性模拟 text-stroke 属性，以将边框应用于 CSS 中的字体。text-shadow 属性用于为文本创建阴影。前两个值表示 h-shadow 和 v-shadow 属性。它们表示水平和垂直阴影的位置。我们可以将 blur-radius 值设置为 text-shadow 属性中的第三个值。它将以给定的半径模糊给定位置的阴影。我们可以指定阴影的颜色，使其成为 text-shadow 属性中的第四个值。此方法适用于大多数浏览器。

例如，在 HTML 中的 h1 标签内写入一些文本。在 CSS 中，选择 h1 标签并编写属性 text-shadow。为 h-shadow 和 v-shadow 属性指定值 0。为 blur-radius 写 2px 并赋予 red 颜色。

在下面的示例中，我们使用 text-shadow 属性模拟了字体上的边框特征。我们为水平和垂直半径设置值 0，以便在为阴影赋予颜色时阴影看起来像一个边框。

示例代码：

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}