该文章参考了张鑫旭的两博文：
paint-order
webkit-text-stroke

webkit-text-stroke文字描边


描边效果：居中描边
现象：text-stroke-width会削弱文字的字重，导致文字变细

-webkit-text-stroke: 2px red;//等同-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: red;
完美描边效果

可以使用-webkit-text-stroke描边文字和非描边文字相互重叠覆盖的方法模拟。技巧就在于-webkit-text-stroke描边文字的描边宽度要是要实现的外描边效果宽度的2倍。

<div class="texts">    <p class="text1">我是苗冰的小哇啊</p>    <p class="text2">我是苗冰的小哇啊</p></div>//css.texts {    position: relative;}.text1 {    font-size: 40px;    position: absolute;    z-index: 2;    font-weight: bold;}.text2 {    font-size: 40px;    font-weight: bold;    -webkit-text-stroke: green 6px;    position: absolute;}


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

text-shadow

.strok-outside {    text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;}


由于text-shadow不支持阴影扩展（box-shadow支持），因此，我们使用四向阴影叠加实现。
如图，当文字特别大的时候，会有齿轮问题。

svg

CSS paint-order作用在SVG图形元素上，设置是先绘制描边还是先绘制填充。
在SVG中，描边和填充同时都有设置是很常见的，而SVG图形的描边和-webkit-text-stroke是一样的，都是居中描边。

svg {    background-color:deepskyblue;    fill:crimson;    stroke:white;    stroke-width:6px;    font-size:40px;    font-weight:bold;}.paint-order {    paint-order:stroke;}<svg xmlns="http://www.w3.org/2000/svg">    <text x="10" y="50">我是测试小霸王</text>    <text x="10" y="120" class="paint-order">我是测试小霸王</text></svg>

//`||`表示或者，可以并存paint-order: normal | [ fill || stroke || markers ]paint-order: markers stroke;
  • normal:默认值。绘制顺序是fill stroke markers。图形绘制是后来居上的，因此默认是描边覆盖填充，标记覆盖描边。
  • fill:先填充。
  • stroke:先描边，然后再填充或者标记。
  • markers:先标记。下图坐标值的两个箭头，以及折线上的红色小圆点就是标记，<marker>元素绘制的

CSS paint-order可以作用在SVG的以下这些元素上：<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>,~~~~ 以及<tspan>。

paint-order也可以直接作为XML属性用在上面这些元素上。
兼容性也是不错的