小tip: 了解CSS text-decoration新特性新表现
这篇讲的是CSS里大家用惯了的text-decoration属性,其实远不止下划线、删除线那么简单。作者从常见的链接下划线、商品原价删除线出发,先回顾了CSS2.1时代那些略显“古早”的取值:比如几乎没人用的上划线(overline)和已被浏览器抛弃的闪烁(blink)。 真正的升级来自CSS3。text-decoration不再是一个单打独斗的属性,它演化成了一系列属性。其中,text-decoration-style解锁了虚线、点线、双线、波浪线等新线型;text-decoration-color让我们终于能单独控制装饰线的颜色,告别“线条只能跟文字同色”的时代。 文章尤其探讨了text-decoration-skip这个颇具巧思的属性,它能控制装饰线是直接穿透字符和图片,还是智能地“跳过”它们(如ink模式)。尽管目前浏览器支持度有限,但作者也指出了Safari已默认采用了类似ink的行为,并提供了重置方法。文末附有完整的演示代码,能让你直观感受这些新旧特性的表现差异。