CSS 文字描边效果的研究

内容简介：CSS 文字描边效果的研究

前一阵在做 Chrome 插件研究了一波文字前景色的问题，最终我们还是把思路望向了描边，又正好最近看了一波《CSS 揭秘》，里面正好讲到了描边的问题。

最快捷的方法：text-stroke

有个神奇的 text-stroke 属性，如同名字所描述的那样，就是用于文字描边的。

缺点是，它的描边是内描边，占用了字体本身的空间，其二，兼容性太差，这并不是一个标准的属性，目前只支持很少的浏览器，关于它可以阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

传统方法：text-shadow to Hack

之前我查到的都是通过绘制不同方向的 text-shadow 扩散，但是这种方法充斥着 hack 的味道，描边越粗，效果就越差。

在 CSS 揭秘中还提到了一种轻微模糊的方法，在文末会有 JS Fiddle 实际展示。

最终：SVG Best！

最终我们通过 SVG 可以实现描边，设置一波描边样式，而且是外描边，弥补了第一种方法的缺点。缺点是略复杂，侵入了 HTML 的层面。

Code & 效果

以上所述就是小编给大家介绍的《CSS 文字描边效果的研究》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 文字逐个显隐加载效果
• 文字跑马灯效果
• CSS 揭秘笔记 - 文字效果
• text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩
• 文字悬停下划线动画效果集合
• PS制作炫彩2018色块文字效果教程

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。