CSS实现字体描边的方法

最近写uni项目实现字体描边,但是发现仅仅使用css的属性会覆盖文字本身;

-webkit-text-stroke:8rpx #202020;

参考了”WEB嘟嘟“CSS实现字体描边的方法_WEB嘟嘟的博客-CSDN博客_css字体描边该博主使用了两层div绝对定位的方式实现了如下效果。

CSS实现字体描边的方法_第1张图片 但是使用后发现,如果将改字体封装为组件,使用改字体组件会影响上层div的flex布局。于是我再老哥的基础上又增加了一层div用来给组件一个大小,方便定位。写再uni的代码当中替换view为div,rpx为px即可再h5中正常使用。

 






实现效果如下:

感谢该博主给的方法,再次记录一下加了一点优化。

内容参考自:CSS实现字体描边的方法_WEB嘟嘟的博客-CSDN博客_css字体描边

你可能感兴趣的:(css3,前端,css,html)