CSS中的text-decoration属性详解

描述
text-decoration是CSS中用于设置文本装饰线的属性，可以控制线条的类型、颜色、样式和粗细。这个属性是text-decoration-line、text-decoration-color、text-decoration-style和text-decoration-thickness的简写形式。

详细讲解

1. 基本语法

text-decoration: <text-decoration-line> || <text-decoration-color> || <text-decoration-style> || <text-decoration-thickness>;

2. 属性值详解

2.1 线条类型（text-decoration-line）

• none：无装饰线（默认值）
• underline：下划线
• overline：上划线
• line-through：删除线
• 可组合使用：underline overline（同时显示下划线和上划线）

2.2 线条颜色（text-decoration-color）

• 任意有效的颜色值
• 默认使用文本颜色（color属性的值）

2.3 线条样式（text-decoration-style）

• solid：实线（默认）
• double：双线
• dotted：点线
• dashed：虚线
• wavy：波浪线

2.4 线条粗细（text-decoration-thickness）

• auto：浏览器自动计算（默认）
• from-font：使用字体中的建议厚度
• 长度值：如2px、0.1em
• 百分比值：相对于字体大小

3. 实际应用示例

3.1 基础用法

/* 红色波浪下划线 */
.text {
    text-decoration: underline wavy red;
}

/* 蓝色双删除线 */
.text {
    text-decoration: line-through double blue;
}

3.2 组合使用

/* 上下都有虚线装饰 */
.text {
    text-decoration: underline overline dashed #333;
}

/* 自定义粗细的波浪线 */
.text {
    text-decoration: underline wavy green 3px;
}

4. 新老语法对比

传统写法（已不推荐）

.text {
    text-decoration: underline; /* 只能设置线条类型 */
}

现代写法（推荐）

.text {
    text-decoration: underline solid blue 2px;
}

5. 注意事项

5.1 继承性
text-decoration属性不会被继承，子元素需要单独设置

5.2 与边框的区别

• text-decoration随文本流动（换行时每行都有）
• border-bottom是块级装饰（整个元素底部一条线）

5.3 浏览器兼容性

• 现代浏览器都支持简写语法
• 旧版本浏览器可能需要使用分开的属性

6. 实用技巧

6.1 链接样式优化

a {
    text-decoration: none;
    border-bottom: 1px solid;
    transition: border-color 0.3s;
}

a:hover {
    border-bottom-color: transparent;
}

6.2 重点文本强调

.important {
    text-decoration: underline 2px wavy #ff6b6b;
}

6.3 价格显示

.original-price {
    text-decoration: line-through 2px red;
}

.discount-price {
    color: green;
    font-weight: bold;
}

7. 响应式设计中的应用

/* 移动端使用较细的装饰线 */
@media (max-width: 768px) {
    .decorated-text {
        text-decoration-thickness: 1px;
    }
}

/* 桌面端使用较粗的装饰线 */
@media (min-width: 769px) {
    .decorated-text {
        text-decoration-thickness: 2px;
    }
}

通过以上详细的讲解，你应该对text-decoration属性有了全面的理解。这个属性虽然看似简单，但通过合理的组合使用，可以为文本添加丰富而精致的装饰效果。