Page 162 - css揭秘

然后，就可以通过色标的百分比位置值来微调虚线的虚实比例，还可以
通过 background-size 来改变虚线的疏密。

试一试 play.csssecrets.io/underlines

最后留个练习给你。试试生成波浪型的下划线，就像文本编辑器在高亮
拼写错误时所用的那种效果。（提示，你会用到两层渐变。）在下面的“试一
试”示例中可以找到解决方案，但在亲手尝试之前请不要偷看答案哦，还是
自己动手更好玩！

试一试 play.csssecrets.io/wavy-underlines

向 Marcin Wichary（http://www.aresluna.org）脱帽致敬，感谢他提出
这 个 效 果 的 最 初 版 本（http://medium.com/designing-medium/crafting-link-
underlines-on-medium-7c03a9274f 9）。

致 敬

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范
„ CSS 图像
http://w3.org/TR/css-images

„ CSS 文本装饰
http://w3.org/TR/css-text-decor

关于未来 未来的文本下划线

在未来自定义下划线的时候，我们再也不需要求助于这些带有 hack 味道的方法了。在 CSS 文本装饰（第
三版）（http://w3.org/TR/css-text-decor-3）中，针对这个需求引入了一些新属性。
„ text-decoration-color 用于自定义下划线或其他装饰效果的颜色。
„ text-decoration-style 用于定义装饰效果的风格（比如实线、虚线、波浪线等）。
„ text-decoration-skip 用于指定是否避让空格、字母降部或其他对象。

„ text-underline-position 用于微调下划线的具体摆放位置。
不过，目前这些属性基本上还没有得到浏览器的支持。

131
26 自定义下划线
26 自定义下划线 131

඀ࠡ JOEC