如何二次加粗文字？如何实现多重边框？下面本篇文章就来给大家介绍一下巧妙利用 css 实现文字二次加粗和多重边框效果，希望对大家有所帮助！
p { font-size: 64px; letter-spacing: 6px; font-weight: bold; -webkit-text-stroke: 2px #000; filter: url(#dilate);}
效果如下:
我们可以通过 SVG feMorphology 滤镜中的 radius 控制边框大小，feFlood 滤镜中的 flood-color 控制边框颜色。并且，这里的 SVG 代码可以任意放置，只需要在 CSS 中利用 filter 引入即可。
本文不对 SVG 滤镜做过多的讲解，对 SVG 滤镜原理感兴趣的，可以翻看我上述提到的文章。
至此，我们就完美的实现了在已经利用 font-weight: bold 和 -webkit-text-stroke 的基础上，再给文字添加不一样颜色的边框的需求。
放大了看，这种方式生成的边框，是真边框，不带任何的模糊：
CodePen Demo — 利用 SVG feMorphology 滤镜给文字添加边框
最后
OK，本文到此结束，介绍了一些 CSS 中的奇技淫巧去实现文字二次加粗后加边框的需求，实际需求中，如果不是要求任意字都要有这个效果，其实我更推荐切图大法，高保真，不丢失细节。
当然，可能还有更便捷更有意思的解法，欢迎在评论区不吝赐教。
（学习视频分享：css视频教程、web前端）
以上就是巧妙利用 CSS 实现文字二次加粗和多重边框效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624834.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
