IT兄弟連 HTML5教程 CSS3屬性特效 文字描邊

• 2019 年 11 月 13 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103042013

用CSS3實現的文字描邊效果，一個CSS3文字特效實例，字體可以自己隨意改，字體顏色也可以自己改。IE9以下瀏覽器無效果，所以提醒大家測試時候要使用Google Chrome。-webkit-text-stroke可以為文字添加邊框。它不但可以設置文字邊框的寬度，也能設置其顏色。而且，配合使用color: transparent屬性，你還可以創建鏤空的字體！

語法如下：

-webkit-text-stroke:寬度 顏色

接下來，為讀者準備了一個實例，為段落元素添加文字描邊。若瀏覽器不支援描邊則為段落文字設置為藍色，若支援則為段落文字設置為填充顏色為藍色，描邊顏色為黑色。程式碼如下：

將這段程式碼分別在Chrome、IE和FireFox瀏覽器中運行，我們就可以看到不同的文字效果，只有在Chrome瀏覽器中可以看到文字描邊效果，如圖1所示。

圖1 文字描邊（Chrome瀏覽器）

我們還可以通過文字陰影text-shadow實現文字描邊效果，以下是對使用文字陰影實現描邊的幾條解釋：

（1）text-shadow:向文本設置陰影；

（2）text-shadow: h-shadow v-shadow blur color；

（3）h-shadow：指定陰影在水平方向上的延伸距離，可以為負值；

（4）v-shadow：指定陰影在垂直方向上的延伸距離，可以為負值；

圖1 未實現文字描邊（IE瀏覽器）

圖1 未實現文字描邊（FireFox瀏覽器）

（5）blur：指定陰影模糊效果的作用距離；

（6）用逗號分隔的4個屬性值代表的方向順序為右下左上；

（7）為了兼容多瀏覽器而加上前綴-webkit-和-moz-。

現在想要使用text-shadow實現文字描邊效果如上例中的同樣設置文字顏色為藍色描邊為黑色，程式碼如下：

將這段程式碼寫在段落樣式表中後分別在Chrome、IE和FireFox瀏覽器中運行，我們就可以看到不同的文字效果，Chrome瀏覽器和FireFox中可以看到文字描邊效果，如圖2所示：

圖2 利用text-shadow實現文字描邊效果（Chrome）

圖2 利用text-shadow實現文字描邊效果（IE）

圖2 利用text-shadow實現文字描邊效果（FireFox）

通過上述兩個例子對比，我們可以發現使用-webkit-text-stroke和text-shadow都可以實現文字描邊效果。但是text-stroke只支援webkit內核的瀏覽器，而text-shadow支援webkit和moz內核的瀏覽器。而text-stroke設置描邊會比較簡單。通過仔細地對比，我們可以發現兩者實現描邊的效果有細微的差異，text-stroke例子中，我們為這個屬性的寬度設置為2px，而text-shadow的延伸距離也設置為2px。但是text-shadow設置的描邊明顯寬於text-stroke，原因是text-shadow的描邊是往外延伸。text-stroke實現的效果更好，使用方法也更加方便，所以建議讀者對文字描邊使用-webkit-text-stroke。

-webkit-text-stroke配合使用color: transparent屬性，還可以創建鏤空的字體，下面實現一個藍色的鏤空字體，程式碼如下所示：

運行這段程式碼在Chrome瀏覽器中運行中可以看到文字鏤空效果，如圖3所示。

圖3 文字鏤空效果