文字描边_如何在网页里实现文字描边效果
生活随笔
收集整理的這篇文章主要介紹了
文字描边_如何在网页里实现文字描边效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文字描邊
想要在網(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: azure git怎么使用_Azure(
- 下一篇: flutter 国际化_Flutter