在 CSS 中設定字型邊框

1. 在 CSS 中使用 -webkit-text-stroke 屬性為字型應用邊框
2. 在 CSS 中使用 text-shadow 屬性為字型應用邊框

本教程將介紹在 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;
}