文字描边

想要在网页里实现文本描边效果，在以前只能使用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

案例--图片文字描边

只需要将背景图换成图片，还可以做出以图片为底的描边效果

知识导图