文字描邊

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

01

語(yǔ)法

text-stroke:?

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

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

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

02

案例--文字描邊

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

03

案例--漸變文字

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

04

案例--圖片文字描邊

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

知識(shí)導(dǎo)圖

總結(jié)

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

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