1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] 透過CSS3的屬性text-stroke,就能實現樓空的文字邊框效果
CSS CSS3 網頁開發

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

2020/03/19

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

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


Step1
首先,先在區塊上,輸入文字。
梅問題-[教學] 透過CSS3的屬性text-stroke,就能實邊文字邊框效果
Step2
接著在文字樣式中,將顏色設為透明color:transparent;,這時在畫面中文字就會消失不見。
梅問題-[教學] 透過CSS3的屬性text-stroke,就能實邊文字邊框效果
Step3
再加入CSS3的文字邊框屬性-webkit-text-stroke: 2px #fff;,而2px是邊框的粗細,#fff是邊框顏色,當然也可使用rgba這樣邊框,還會有半透明效果,因此透過CSS3就能實現文字樓空的邊框字啦!
梅問題-[教學] 透過CSS3的屬性text-stroke,就能實邊文字邊框效果
#範例預覽