[教學] 透過CSS3的屬性text-stroke，就能實現樓空的文字邊框效果

　　在網頁中要將區塊描邊相當的簡單，且只需使用到CSS2的border邊框屬性，就能幫區塊加上邊框，甚至還能設定邊框的粗細與顏色，完全不用再透過影像軟體，製作1像素的邊線，在那拼拼湊湊的，同時還無法任意的改變顏色，而這就是CSS的魔力所在，透過語法大幅的減少圖檔載入時間，讓網頁呈現更快速。

  但是border只限於區塊使用，若是文字的話就無法使用，因此這時就可改成CSS3的text-stroke，立即就可實現，幫文字描邊，就像在使用影像工具中的文字描邊效果一模一樣，甚至還可改變邊框的粗細與顏色，因此有需要的朋友，這招也趕快學起來吧！

---

Step1
首先，先在區塊上，輸入文字。

---

Step2
接著在文字樣式中，將顏色設為透明color:transparent;，這時在畫面中文字就會消失不見。

---

Step3
再加入CSS3的文字邊框屬性-webkit-text-stroke: 2px #fff;，而2px是邊框的粗細,#fff是邊框顏色，當然也可使用rgba這樣邊框，還會有半透明效果，因此透過CSS3就能實現文字樓空的邊框字啦！

---

#範例預覽