文字描邊

想要在網頁里實現文本描邊效果，在以前只能使用Photoshop等來實現，但現在只需要一個text-stroke屬性，即可輕松做到文本描邊，漸變文本描邊，甚至圖片文本描邊。

01

語法

text-stroke:?

text-stroke是一個復合屬性，由text-stroke-width和text-stroke-color兩個子屬性組成，一般使用他的簡寫方法。

text-stroke-width：設置描邊的寬度，可以為一般的長度值。

text-stroke-color：設置描邊的顏色。

02

案例--文字描邊

實現一個最簡單的文字描邊，只需要設置描邊的寬度、描邊的顏色即可

03

案例--漸變文字

在以往，要實現文字描邊漸變效果，幾乎只能用ps來實現，但現在只需要text-stroke配合text-fill-color(文本填充顏色)和背景漸變(linear-gradient)就可以了。

04

案例--圖片文字描邊

只需要將背景圖換成圖片，還可以做出以圖片為底的描邊效果

知識導圖