文字描邊

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

01

語法

text-stroke:?

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

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

text-stroke-color：設(shè)置描邊的顏色。

02

案例--文字描邊

實現(xiàn)一個最簡單的文字描邊，只需要設(shè)置描邊的寬度、描邊的顏色即可

03

案例--漸變文字

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

04

案例--圖片文字描邊

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

知識導(dǎo)圖

總結(jié)

以上是生活随笔為你收集整理的文字描边_如何在网页里实现文字描边效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。