在 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 中給出文字的輪廓。