在CSS3中，我們可以使用text-stroke屬性為文字添加描邊效果。這個描邊效果，說白了就是給文字添加邊框。注意喔，由於CSS3的出現，“文字”也能添加邊框了呢。
語法：
text-stroke:寬度值 顏色值;
說明：
text-stroke是一個復合屬性，由text-stroke-width和text-stroke-color兩個子屬性組成。
（1）text-stroke-width屬性：設置描邊的寬度，可以為一般的長度值。
（2）text-stroke-color屬性：設置描邊的顏色。我們可以使用“在線調色板”來取色。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-stroke屬性</title>
<style type="text/css">
div
{
font-size:30px;
font-weight:bold;
}
#div2
{
text-stroke:1px red;
-webkit-text-stroke:1px red;
-moz-text-stroke:1px red;
-o-text-stroke:1px red;
}
</style>
</head>
<body>
<div id="div1">文字沒有被描邊</div>
<div id="div2">文字被描了1像素的紅邊</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
文字描邊的效果在實際開發中並不常用，因為效果不是很理想。我們只是了解一下text-stroke屬性即可。當然如果你有創意的話，可以結合其他技術使用text-stroke屬性看看。
不過當你用text-stroke屬性配合“color:transparent;”，你還可以創建镂空的文字！具體例子如下。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-stroke屬性</title>
<style type="text/css">
div
{
font-family:Verdana;
font-size:50px;
font-weight:bold;
color:transparent; /*設置文字顏色為透明*/
text-stroke:2px red;
-webkit-text-stroke:2px #45B823;
-moz-text-stroke:2px #45B823;
}
</style>
</head>
<body>
<div>helicopter</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
感覺很不錯吧。在這一章，站長helicopter給大家介紹了很多文字的特效，有非常多是你在書籍或教程看不到的，或者說沒有那麼系統幫大家總結的。希望大家累積一下這些特效的實現技巧，靈活地運用，可以為你網頁添色不少。