在 CSS 中设置字体边框

Subodh Poudel 2023年2月20日 2021年10月30日
  1. 在 CSS 中使用 -webkit-text-stroke 属性为字体应用边框
  2. 在 CSS 中使用 text-shadow 属性为字体应用边框
在 CSS 中设置字体边框

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

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

我们可以在文本上使用 text-stroke 属性来为 CSS 中的字体应用边框。我们需要在 text-stroke 属性之前使用 webkit 前缀才能使用该功能。但是,它仅适用于基于 web-kit 的浏览器,例如 Safari 和 Chrome。text-stroke 属性让我们可以在矢量绘图应用程序(如 Adob​​e Illustrator)中装饰文本。该属性是其他两个属性 text-stroke-widthtext-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-shadowv-shadow 属性。它们表示水平和垂直阴影的位置。我们可以将 blur-radius 值设置为 text-shadow 属性中的第三个值。它将以给定的半径模糊给定位置的阴影。我们可以指定阴影的颜色,使其成为 text-shadow 属性中的第四个值。此方法适用于大多数浏览器。

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

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

示例代码:

<h1>The black font has red border</h1>
h1 {
 text-shadow: 0 0 2px red;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - CSS Font