CSS中的字体描边

　　兴趣使然，突然看见网上的一些带有描边的字体，觉得有点意思，便尝试去做了下

　　不是什么很厉害的技巧，当然也有参考张鑫旭大神写的文章

　　只能感叹，css的世界还很大，很广阔

　　直入主题：

　　对于文字的描边，一般都会想到-webkit-text-stroke去描边（抱歉我是百度的，我给大家丢脸了）

　　但是这样直接写的话，会出现一个问题就是描边的宽度，如果设置的稍大一点，你会发现字体原本的颜色就消失了

　　关于这点，张鑫旭写的一篇文章中有详细讲到

　　https://www.zhangxinxu.com/wordpress/2017/06/webkit-text-stroke-css-text-shadow/

　　原理就是这个描边是属于居中描边的：

　　什么意思？就是说这个描边是从字体的外边框，同时向外和向内描边的

　　像这样：

　　

　　外描边还好，但是内描边就会覆盖掉原本文字的颜色，这样就会导致原本字体会被覆盖掉（当然视情况而定，如果刚好需要这样的效果当我没说）

　　所以对于这种情况就利用重叠描边

　　css代码如下：

　　

.nickname {
    text-align: center;
    font-size: 0.587rem;
    font-weight:;
    color: #3c3c3c;
    margin-top: 0.32rem;
    position: relative;
    z-index:;
}
.nickname::before {
    content: '想要重叠的文字';
    position: absolute;
    z-index: -1;
    -webkit-text-stroke: 0.15rem #fff;
}

　　原理就是将原文本设置定位，层级提高，然后利用伪元素进行描边，最后重合在一起

　　这样就相当于实现了 —— 外描边

　　效果大概长这样：

　　

　　当作是个小技巧吧！