text-stroke多重描边

text-stroke属性用于给文字进行描边，它其实和background属性等复合属性类似，有多个属性合并成的写法，只不过text-stroke只有两个属性合并：text-stroke-width和text-stroke-color.就是描边的颜色和宽度，在text-stroke中，颜色是默认为文字颜色，但是宽度则默认为0，所以在设置中，宽度必须设置。而如果我们不设置颜色值，那么字体将会比起以往更加的宽。

text-stroke是居中描边，所以要让字体比实际设置得要小一些的话，我们只需要让颜色设置成和背景颜色一致就可以了

如果我们要制作外描边的方法，可以利用阴影text-shadow来模拟，或者利用重叠覆盖的方法

多重描边：

text-shadow的属性可以不断叠加，但是text-stroke则不可以，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。

<p data-text="多重描边">多重描边</p>

p {
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
    position: relative;
    z-index: 0;
}
p::before,
p::after {
    content: attr(data-text);
    position: absolute; left: 0;
    z-index: -1;
}
p::before {
    -webkit-text-stroke: 7px yellow;
}
p::after {
    -webkit-text-stroke: 4px red;
}