css多重描边效果

<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;
}

效果：