在 HTML 中勾勒文字

Rajeev Baniya 2023年2月19日 2022年7月12日
在 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。接下來,將 divtext-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 中給出文字的輪廓。

相關文章 - HTML Text