css3文字怎麼描邊？ css3字體描邊的實作方法

在網頁中有時會看到文字的輪廓都用邊描繪出來，這其實就是字體的描邊，以前為文字描邊可能都會需要藉助ps之類的工具，但是自從css3出現以後，文字的描邊就不需要藉助其他工具就可以直接實現了，所以，接下來這篇文章就來跟大家分享關於css3實作字體描邊的方法。

建議手冊：CSS線上手冊

#首先我們來看看css3中文字描邊text-stroke屬性。

說明：text-stroke屬性只有webkit核心的Safari和Chrome支援。

語法：text-stroke： ||

屬性值：

：設定或擷取物件中的文字的描邊厚度

：設定或擷取物件中的文字的描邊顏色

來直接看一個例子：

<h1>PHP中文网文字描边</h1>

h1{
    -webkit-text-stroke: 1.0px #000000;
     color:pink
}

#css3文字描邊效果如下：

#要注意的是：

文字描邊text-stroke屬性只有在字體很大的時候才能看到描邊效果，如果字體比較小，描邊顏色會遮住文字本身顏色，如圖：

除了上述使用text-stroke屬性來實作文字描邊之外，其實還可以利用文字陰影屬性text-shadow來進行文字描邊，text-shadow屬性的具體內容我們在css3如何設定文字陰影？ css3用text-shadow設定文字陰影的方法已經介紹過了，這裡就不具體說了，所以我們就來直接看text-shadow屬性實作字體描邊的實例：

<h1>PHP中文网文字描边</h1>

h1{text-shadow:2px 2px 0px blue;
color:pink;
}

css3文字描邊效果如下：

#說明：如果覺得文字描邊不夠粗，可以使用多重字體陰影，這樣就可以實現較粗的文字描邊。

css3較粗的文字描邊程式碼如下：

<h1>PHP中文网文字描边</h1>

h1{text-shadow:
  1px 1px 0px blue,
  -1px -1px 0px blue,
  2px 2px 0px blue,
  -2px -2px 0px blue,
  3px 3px 0px blue, 
  -3px -3px 0px blue;
color:pink;
}

css3文字描邊效果如下：

#相關文章推薦：
1.如何使用css text-stroke屬性來製作文字描邊？ （原始碼）
2.css3怎麼為文字加上描邊？ css3實作字體描邊樣式的方法（程式碼詳解）
#相關影片推薦：
1.CSS影片教學-玉女心經版

#以上就是本篇文章的全部內容了，關於文章中所提到的關於css3中的屬性的具體內容大家可以參考css3使用手冊來進行學習。

以上是css3文字怎麼描邊？ css3字體描邊的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！