在 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