CSS中的text-decoration属性详解

描述
text-decoration是CSS中用于控制文本修饰线的属性，可以同时设置线条的类型、颜色、样式及粗细。它最初仅支持简单的下划线、删除线等，但在CSS3中扩展为简写属性，能够精细控制修饰线的各个视觉维度。

解题过程

1. 基本语法与取值

   • 初始语法：text-decoration: line-type color style thickness;
   • 独立属性（CSS3新增）：
     • text-decoration-line：线条类型（如underline、overline）
     • text-decoration-color：线条颜色
     • text-decoration-style：线条样式（如solid、dashed）
     • text-decoration-thickness：线条粗细

2. 线条类型（text-decoration-line）

   • 常用值：
     • underline：文本下方线条
     • overline：文本上方线条
     • line-through：删除线（贯穿文本）
     • none：无修饰线（默认值）
   • 示例：

     .underline { text-decoration-line: underline; }  
     .multiple { text-decoration-line: underline overline; } /* 可组合 */  
     

3. 线条样式（text-decoration-style）

   • 支持值：
     • solid：实线（默认）
     • double：双实线
     • dotted：点线
     • dashed：虚线
     • wavy：波浪线
   • 示例：

     .wavy { text-decoration-style: wavy; }  
     

4. 线条颜色与粗细

   • text-decoration-color：支持任意颜色值（如#ff0000、red）
   • text-decoration-thickness：
     • 长度值（如2px）
     • 百分比（相对于字体大小，如10%）
     • 关键字（auto、from-font）
   • 示例：

     .custom {  
       text-decoration-color: blue;  
       text-decoration-thickness: 0.1em;  
     }  
     

5. 简写属性使用技巧

   • 简写时顺序任意，但推荐：line color style thickness
   • 省略的值会使用默认值或继承值
   • 示例对比：

     /* 分开设置 */  
     .detail {  
       text-decoration-line: underline;  
       text-decoration-color: red;  
       text-decoration-style: wavy;  
     }  
     /* 简写等效 */  
     .shorthand { text-decoration: wavy red underline; }  
     

6. 注意事项

   • 继承性：text-decoration不可继承，但修饰线效果会穿透嵌套元素（如下划线贯穿子元素）
   • 兼容性：CSS3新增属性（如thickness）需注意浏览器支持情况
   • 交互增强：常与:hover伪类结合实现动态效果

     a:hover { text-decoration: underline dashed; }  
     

总结
text-decoration从基础线条控制发展为可定制颜色、样式的强大工具，通过简写或分属性设置能满足多样化设计需求，尤其适用于链接美化、重点文本标注等场景。