兴趣使然,突然看见网上的一些带有描边的字体,觉得有点意思,便尝试去做了下
不是什么很厉害的技巧,当然也有参考张鑫旭大神写的文章
只能感叹,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: 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; }
原理就是将原文本设置定位,层级提高,然后利用伪元素进行描边,最后重合在一起
这样就相当于实现了 —— 外描边
效果大概长这样:
当作是个小技巧吧!