css3实现文字描边的效果

原文链接：http://www.zhangxinxu.com/wordpress/2017/06/webkit-text-stroke-css-text-shadow/

.p1,.p2,.p3 {font: menu;font-size: 40px;margin: 0;}.p2 {-webkit-text-stroke: 2px red;}.p3 {position: relative;z-index: 0;webkit-background-clip: text;/*-webkit-text-fill-color: transparent;*/}.p3::before {content: attr(data-text);position: absolute;left: 0;-webkit-text-stroke: 7px yellow;z-index: -1;}.p3::after {content: attr(data-text);position: absolute;left: 0;z-index: -1;-webkit-text-stroke: 4px red;}

index.html

        <p class="p1">没有描边</p><p class="p2">有描边</p><p class="p3" data-text='重叠描边'>重叠描边</p>

以梦为马  余年不负韶华