text-decoration的核心作用是为文本添加装饰线（如下划线、删除线、上划线），并可控制颜色、样式（实线/虚线/波浪线等）和粗细，是文本外观的“画笔”；2. 它是复合属性，包含text-decoration-line（线类型）、text-decoration-color（颜色）、text-decoration-style（样式）和text-decoration-thickness（粗细）；3. 常见应用场景包括链接样式控制（如移除默认下划线并在悬停时显示特殊样式）、表示文本状态（如删除线标记旧价格）及创意排版强调；4. 使用时需注意兼容性（新特性在旧浏览器可能不支持）、可访问性（移除下划线时应提供其他交互提示）、继承性（子元素会继承父元素的装饰线，必要时需覆盖）以及性能（静态使用无负担）。
CSS中的text-decoration属性，它的核心作用是为文本添加各种装饰线，比如我们最常见的下划线，还有删除线和上划线。它不仅仅是简单地画一条线，还能让我们控制这条线的颜色、样式（实线、虚线、波浪线等），甚至是粗细。简单来说，它就是文本外观的“画笔”，用来强调、区分或者表示文本的状态。
它是一个复合属性，可以同时设置多项文本装饰的细节。
文本装饰线的艺术：text-decoration 的具体用法
text-decoration 这个属性，说白了就是给文字“穿衣服”用的，而且这衣服还带各种线条装饰。它其实是好几个子属性的缩写：text-decoration-line、text-decoration-color、text-decoration-style 和 text-decoration-thickness。理解了这几个，你就掌握了它的精髓。
立即学习“前端免费学习笔记（深入）”；
text-decoration-line 决定了线的类型：
- none: 没有装饰线。这在网页设计里用得特别多，比如很多导航链接默认的下划线我们就不想要。
- underline: 下划线。这是最常见，也最容易被联想到的。
- overline: 上划线。
- line-through: 删除线。
text-decoration-color 顾名思义，就是装饰线的颜色。你可以用任何CSS支持的颜色值来设置，比如 red、#FF0000、rgb(255,0,0)。
text-decoration-style 决定了线的样式：
- solid: 实线。
- double: 双线。
- dotted: 点线。
- dashed: 虚线。
- wavy: 波浪线。
text-decoration-thickness 控制线的粗细。这个属性相对较新，可以设置具体的像素值（2px）、百分比（50%，相对于字体大小），或者使用 auto、from-font 让浏览器或字体决定。
所以，当你写 text-decoration: underline wavy red 2px; 时，它就代表了一段文字下面会有一条红色的、波浪状的、粗细为2像素的下划线。是不是一下子就清晰了？
除了下划线，text-decoration 还能实现哪些文本装饰效果？
很多时候，我们一提到 text-decoration，脑子里立刻跳出来的就是链接的下划线。但实际上，它的能力远不止于此。它能做的，是给文本加上不同位置、不同颜色、不同样式的线条。
比如，你可能想给一个标题加上一个醒目的上划线，来模拟一种“标题线”的效果，这时候 text-decoration: overline blue solid 3px; 就能派上用场。或者，在一个电商网站上，为了表示商品原价被划掉，显示现价，我们就会用到 text-decoration: line-through; 来给旧价格加上删除线。这比直接把文字删掉要友好得多，既保留了信息，又清晰地传达了“已作废”的含义。
更进一步，如果你想让一个链接的下划线不再是单调的实线，而是有点活泼的波浪线，甚至在鼠标悬停时才出现，并且颜色和文字颜色不同，这些都可以通过 text-decoration 及其子属性的组合来实现。例如，给链接设置 text-decoration: none;，然后在 :hover 伪类中设置 text-decoration: underline wavy var(–accent-color);，就能实现这种交互效果。这使得设计上的自由度大大增加，不再受限于浏览器默认的朴素下划线。
text-decoration 在实际网页设计中有哪些常见应用场景？
在日常的网页开发中，text-decoration 的身影无处不在，而且它的使用场景远比我们想象的要灵活。
最普遍的，那肯定就是链接的样式控制了。默认情况下， 标签都会带下划线。很多设计师为了追求简洁或统一的视觉风格，会选择用 text-decoration: none; 来移除这些下划线。但从可访问性角度讲，单纯移除下划线可能会让用户难以分辨哪些是可点击的链接。所以，一种常见的做法是，在链接非活动状态时隐藏下划线，而在鼠标悬停（:hover）或获得焦点（:focus）时，重新显示下划线，或者改变下划线的颜色和样式，提供视觉反馈。例如，你可以让链接在悬停时出现一条红色虚线，而不是默认的蓝色实线。
其次，表示内容状态也是一个非常重要的应用。就像前面提到的，电商网站上显示商品价格变动时，旧价格通常会用 line-through 来表示已作废或已打折。这是一种非常直观的视觉语言，用户一看就知道这个价格不再有效。同样，在一些任务管理或文档编辑应用中，完成的任务或被删除的文本也常用删除线来标记，既保留了历史痕迹，又清晰地表明了当前状态。
此外，它也可以用于文本强调或特殊标注。虽然不如 font-weight 或 font-style 常用，但有时为了达到某种特定的视觉效果，比如模拟手写批注，或者在特定场景下给某个关键词加上一个独特的波浪线，text-decoration 也能发挥作用。我个人在一些创意排版中，偶尔会用 overline 来给某些段落标题增加一点“分量”，或者用 underline 配合 dotted 样式来暗示“待补充”的信息，这些都是在默认功能之外的拓展应用。
使用 text-decoration 时需要注意哪些兼容性或最佳实践？
在使用 text-decoration 的过程中，确实有一些值得我们注意的地方，特别是关于浏览器兼容性和一些设计上的考量。
首先是兼容性。text-decoration 的基本属性（line 和 color）在所有现代浏览器中都有很好的支持，甚至包括一些老旧的IE版本。但像 text-decoration-style 和 text-decoration-thickness 这样的新特性，尤其是一些更复杂的样式值（如 wavy、double）和 thickness 的精确控制，在旧版浏览器（比如IE11或更早）中可能得不到支持。这意味着，如果你的目标用户群包含这些老旧浏览器的用户，那么复杂的装饰效果可能会降级显示为默认的实线，甚至不显示。所以在追求酷炫效果的同时，也要考虑其在不同环境下的表现，确保核心信息不丢失。
其次，关于可访问性。这是非常关键的一点。正如之前提到的，单纯地移除链接下划线，对于那些依赖视觉线索来识别链接的用户（包括色盲用户）来说，可能会造成困扰。最佳实践是，如果你移除了默认的下划线，请务必提供其他视觉提示来表明这是一个可点击的元素，比如改变颜色、增加背景、改变字体粗细，或者在 :hover 和 :focus 状态下重新显示下划线。确保用户无论通过何种方式访问你的网站，都能清晰地识别出交互元素。
再来是继承性。text-decoration 属性是可继承的。这意味着如果你在一个父元素上设置了 text-decoration: underline;，那么它的所有子文本元素都会继承这个下划线。这通常是符合预期的，但在某些情况下，你可能不希望子元素也带下划线，这时就需要明确地在子元素上设置 text-decoration: none; 来覆盖继承的样式。值得注意的是，虽然 text-decoration 这个复合属性是可继承的，但它的子属性（如 text-decoration-color）在某些旧的实现中可能表现不一致，所以如果需要精细控制，最好还是在目标元素上直接设置。
最后，性能方面，text-decoration 属性的渲染成本相对较低，通常不会成为网页性能的瓶颈。你可以放心地使用它来增强文本的视觉表现力。不过，过度地在大量元素上使用复杂的动画效果，始终是需要警惕的。但对于静态的文本装饰，几乎不用担心性能问题。
暂无评论内容