CSS中的字体描边

CSS中的字体描边
兴趣使然，突然看见⽹上的⼀些带有描边的字体，觉得有点意思，便尝试去做了下
不是什么很厉害的技巧，当然也有参考⼤神写的⽂章
只能感叹，css的世界还很⼤，很⼴阔
直⼊主题：
对于⽂字的描边，⼀般都会想到-webkit-text-stroke去描边（抱歉我是百度的，我给⼤家丢脸了）
但是这样直接写的话，会出现⼀个问题就是描边的宽度，如果设置的稍⼤⼀点，你会发现字体原本的颜⾊就消失了
关于这点，张鑫旭写的⼀篇⽂章中有详细讲到
原理就是这个描边是属于居中描边的：
什么意思？就是说这个描边是从字体的外边框，同时向外和向内描边的
像这样：
外描边还好，但是内描边就会覆盖掉原本⽂字的颜⾊，这样就会导致原本字体会被覆盖掉（当然视情况⽽定，如果刚好需要这样的效果当我没说）
所以对于这种情况就利⽤重叠描边
css代码如下：
.nickname {
text-align: center;
font-size: 0.587rem;
font-weight: 700;
color: #3c3c3c;
margin-top: 0.32rem;
position: relative;
z-index: 0;
}
.nickname::before {
content: '想要重叠的⽂字';
position: absolute;
z-index: -1;
-webkit-text-stroke: 0.15rem #fff;
}
原理就是将原⽂本设置定位，层级提⾼，然后利⽤伪元素进⾏描边，最后重合在⼀起
这样就相当于实现了 —— 外描边
效果⼤概长这样：
当作是个⼩技巧吧！。