1.什么是文本描边
正常情况下，我们的文本是这个样子的
image.png
此时，如果文字颜色和背景颜色一致的话，会导致文字看起来就是消失了一样。
image.png
文字描边呢，就是在文字周围加上一圈描边，可以设置不同的颜色。
image.png
在设计层面，文字的填充和描边如下所示：
image.png
对于描边，我们是可以设置宽度的：
image.png
如果设置fill为none，或者透明，则会出现如下效果
image.png
还可以设置描边的位置
image.png
2.使用css实现
有如下三种方式实现：
- -webkit-text-stroke
- shadow
- 伪元素
1.-webkit-text-stroke
这个属性可以指定描边的宽度和颜色。如下：
h1 {
-webkit-text-stroke: 3px white;
color:transparent;
}
-webkit-text-stroke的值是-webkit-text-stroke-width和-webkit-text-stroke-color的简写。
也可以这样写
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: white;
color:transparent;
}
结果如下：
image.png
但是使用这种方式实现的描边，有个不好的地方，描边覆盖在文字上方的，相当于是内嵌，看起来是往内延伸，如果宽度设置的大一点，就会发现文字变得很难看。
image.png
可以通过paint-order属性，将描边放置到文字下方。
paint-order: stroke fill;
结果
image.png
但是如果是在chrom浏览器，需要特殊设置
@supports (-webkit-text-fill-color: white) {
h1{ {
color: white;
}
}
需要注意的是，这个属性不是标准属性，在不同浏览器上，表现是很有可能不一致的。
2.shadow
可以使用text-shadow来实现
h1{
color:blue;
text-shadow:
1px 0 0 white, /*right */
0 1px 0 white, /*top */
-1px 0 0 white, /*left */
0 -1px 0 white; /*bottom */
}
结果
image.png
可以把offset的值设置成3px，结果如下：
image.png
这种实现方式需要设置很多的阴影才能达到效果，并且fill不能为透明的颜色。
3.伪元素
使用伪元素的话，原理就是在文本下方再创建一个相同的文本，让上面的看起来有了阴影效果。
首先，给元素添加一个自定义的属性，值为文字的内容
<h1 data-text="HI">HI</h1>
然后添加一个伪元素:after
h1 {
position: relative;
}
h1:after {
content: attr(data-text);
position: absolute;
left: 0;
z-index: -1;
-webkit-text-stroke: 5px white;
font-size: 1em;
}
结果如下
image.png
