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

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