文字描边
想要在网页里实现文本描边效果,在以前只能使用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
案例--图片文字描边
只需要将背景图换成图片,还可以做出以图片为底的描边效果
知识导图