详细讲解css的‌text-decoration属性，并列表总结

2025-12-09 16:42:12 网络作者：本站点击：

CSS text-decoration 属性详解

一、属性概述

text-decoration 是 CSS 中用于控制文本装饰线的属性。它是一个简写属性，可以一次性设置装饰线的类型、颜色、样式和粗细。

二、基本语法

selector {
    text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color> <text-decoration-thickness>;
}

三、text-decoration 分解属性

1. text-decoration-line（装饰线类型）

控制要显示哪种类型的装饰线

值	描述	效果	示例
`none`	无装饰线	移除所有装饰	`text-decoration-line: none;`
`underline`	下划线	文本下方线条	`text-decoration-line: underline;`
`overline`	上划线	文本上方线条	`text-decoration-line: overline;`
`line-through`	删除线	文本中间线条	`text-decoration-line: line-through;`
`blink`	闪烁效果	文本闪烁（已废弃）	`text-decoration-line: blink;`（不推荐）

2. text-decoration-style（装饰线样式）

控制装饰线的视觉样式

值	描述	效果	示例
`solid`	实线	连续不间断的线	`text-decoration-style: solid;`
`double`	双线	两条平行实线	`text-decoration-style: double;`
`dotted`	点线	一系列圆点	`text-decoration-style: dotted;`
`dashed`	虚线	一系列短线段	`text-decoration-style: dashed;`
`wavy`	波浪线	波浪形线条	`text-decoration-style: wavy;`

3. text-decoration-color（装饰线颜色）

控制装饰线的颜色

值类型	描述	示例
颜色关键字	预定义颜色名称	`text-decoration-color: red;`
十六进制	HEX 颜色值	`text-decoration-color: #ff0000;`
RGB/RGBA	RGB 颜色值	`text-decoration-color: rgb(255, 0, 0);`
HSL/HSLA	HSL 颜色值	`text-decoration-color: hsl(0, 100%, 50%);`
`currentColor`	使用当前文本颜色	`text-decoration-color: currentColor;`

4. text-decoration-thickness（装饰线粗细）

控制装饰线的厚度

值	描述	示例
`auto`	浏览器自动选择	`text-decoration-thickness: auto;`
`from-font`	使用字体建议的厚度	`text-decoration-thickness: from-font;`
长度值	具体尺寸	`text-decoration-thickness: 2px;`
百分比值	相对于字体大小	`text-decoration-thickness: 10%;`

5. text-underline-position（下划线位置）

控制下划线的垂直位置（仅适用于 underline）

值	描述	示例
`auto`	浏览器自动选择	`text-underline-position: auto;`
`under`	在文本基线下方	`text-underline-position: under;`
`from-font`	使用字体建议的位置	`text-underline-position: from-font;`
`left` / `right`	在垂直文本中使用	`text-underline-position: left;`

四、text-decoration 属性总结表

属性	描述	可选值	默认值	继承性	示例
text-decoration	简写属性	见各分属性	`none`	否	`underline wavy red 2px`
text-decoration-line	装饰线类型	`none`, `underline`, `overline`, `line-through`	`none`	否	`text-decoration-line: underline overline;`
text-decoration-style	装饰线样式	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`	否	`text-decoration-style: wavy;`
text-decoration-color	装饰线颜色	任意颜色值, `currentColor`	`currentColor`	否	`text-decoration-color: #ff0000;`
text-decoration-thickness	装饰线粗细	`auto`, `from-font`, 长度值, 百分比值	`auto`	否	`text-decoration-thickness: 0.1em;`
text-underline-position	下划线位置	`auto`, `under`, `from-font`, `left`, `right`	`auto`	是	`text-underline-position: under;`

五、实际应用示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS text-decoration 属性详解</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        header {
            text-align: center;
            margin-bottom: 50px;
            padding-bottom: 30px;
            border-bottom: 3px solid var(--secondary-color);
        }
        
        h1 {
            color: var(--primary-color);
            font-size: 3rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.3rem;
            font-weight: 300;
        }
        
        .section {
            margin: 50px 0;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            border-left: 5px solid var(--secondary-color);
        }
        
        .section-title {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .section-title::before {
            content: "→";
            color: var(--secondary-color);
            font-size: 2rem;
        }
        
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 20px;
        }
        
        .demo-item {
            padding: 25px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border-top: 4px solid;
        }
        
        .demo-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
        }
        
        .demo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .demo-name {
            font-weight: bold;
            font-size: 1.4rem;
            color: var(--primary-color);
        }
        
        .demo-code {
            font-family: 'Consolas', 'Monaco', monospace;
            background: #2c3e50;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.9rem;
            white-space: nowrap;
        }
        
        .demo-content {
            line-height: 1.8;
            font-size: 1.1rem;
            min-height: 120px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        /* 不同装饰类型 */
        .underline-demo { border-top-color: #3498db; }
        .overline-demo { border-top-color: #2ecc71; }
        .line-through-demo { border-top-color: #e74c3c; }
        .multiple-demo { border-top-color: #9b59b6; }
        .wavy-demo { border-top-color: #f39c12; }
        .double-demo { border-top-color: #1abc9c; }
        .dotted-demo { border-top-color: #34495e; }
        .dashed-demo { border-top-color: #8e44ad; }
        .thick-demo { border-top-color: #d35400; }
        .colored-demo { border-top-color: #c0392b; }
        
        /* 实际样式 */
        .underline-demo .demo-content { text-decoration: underline; }
        .overline-demo .demo-content { text-decoration: overline; }
        .line-through-demo .demo-content { text-decoration: line-through; }
        .multiple-demo .demo-content { text-decoration: underline overline; }
        .wavy-demo .demo-content { text-decoration: underline wavy; }
        .double-demo .demo-content { text-decoration: underline double; }
        .dotted-demo .demo-content { text-decoration: underline dotted #9b59b6; }
        .dashed-demo .demo-content { text-decoration: underline dashed #3498db 2px; }
        .thick-demo .demo-content { 
            text-decoration: underline solid #2c3e50;
            text-decoration-thickness: 3px;
        }
        .colored-demo .demo-content { 
            text-decoration: underline solid;
            text-decoration-color: #e74c3c;
        }
        
        .property-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .property-table th {
            background: var(--primary-color);
            color: white;
            padding: 18px;
            text-align: left;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .property-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }
        
        .property-table tr:hover {
            background: #f8f9fa;
        }
        
        .code-block {
            background: #1a1a2e;
            color: #e6e6e6;
            padding: 25px;
            border-radius: 10px;
            margin: 25px 0;
            font-family: 'Fira Code', 'Consolas', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            overflow-x: auto;
        }
        
        .code-comment {
            color: #6a9955;
        }
        
        .code-property {
            color: #9cdcfe;
        }
        
        .code-value {
            color: #ce9178;
        }
        
        .tip-box {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border: 2px solid #2196f3;
            color: #1565c0;
            padding: 25px;
            border-radius: 12px;
            margin: 30px 0;
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .tip-box::before {
            content: "💡";
            font-size: 2rem;
            flex-shrink: 0;
        }
        
        .warning-box {
            background: linear-gradient(135deg, #ffecb3 0%, #ffd54f 100%);
            border: 2px solid #ff9800;
            color: #e65100;
            padding: 25px;
            border-radius: 12px;
            margin: 30px 0;
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .warning-box::before {
            content: "⚠️";
            font-size: 2rem;
            flex-shrink: 0;
        }
        
        .link-demo {
            padding: 20px;
            background: #e8f4fc;
            border-radius: 10px;
            margin: 20px 0;
            text-align: center;
        }
        
        .custom-link {
            font-size: 1.2rem;
            color: var(--primary-color);
            text-decoration: none;
            padding: 10px 20px;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .custom-link:hover {
            text-decoration: underline wavy var(--secondary-color) 2px;
            transform: translateY(-2px);
        }
        
        footer {
            text-align: center;
            margin-top: 60px;
            padding-top: 30px;
            border-top: 2px solid #eee;
            color: #7f8c8d;
            font-size: 0.95rem;
        }
        
        @media (max-width: 768px) {
            .demo-grid {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .section {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div>
        <header>
            <h1>CSS text-decoration 属性详解</h1>
            <p>全面掌握文本装饰线的各种样式与高级应用</p>
        </header>
        
        <section>
            <h2>1. 基础装饰线类型</h2>
            <p>text-decoration-line 属性控制装饰线的类型，可以单独使用或组合使用：</p>
            
            <div>
                <!-- 下划线 -->
                <div class="demo-item underline-demo">
                    <div>
                        <div>下划线</div>
                        <div>underline</div>
                    </div>
                    <div>
                        这是带下划线的文本示例
                    </div>
                </div>
                
                <!-- 上划线 -->
                <div class="demo-item overline-demo">
                    <div>
                        <div>上划线</div>
                        <div>overline</div>
                    </div>
                    <div>
                        这是带上划线的文本示例
                    </div>
                </div>
                
                <!-- 删除线 -->
                <div class="demo-item line-through-demo">
                    <div>
                        <div>删除线</div>
                        <div>line-through</div>
                    </div>
                    <div>
                        这是带删除线的文本示例
                    </div>
                </div>
                
                <!-- 多装饰线 -->
                <div class="demo-item multiple-demo">
                    <div>
                        <div>组合装饰线</div>
                        <div>underline overline</div>
                    </div>
                    <div>
                        同时有上下两条装饰线
                    </div>
                </div>
            </div>
        </section>
        
        <section>
            <h2>2. 装饰线样式展示</h2>
            <p>text-decoration-style 属性控制装饰线的视觉样式：</p>
            
            <div>
                <!-- 波浪线 -->
                <div class="demo-item wavy-demo">
                    <div>
                        <div>波浪线</div>
                        <div>wavy</div>
                    </div>
                    <div>
                        波浪线装饰效果
                    </div>
                </div>
                
                <!-- 双线 -->
                <div class="demo-item double-demo">
                    <div>
                        <div>双线</div>
                        <div>double</div>
                    </div>
                    <div>
                        双线装饰效果
                    </div>
                </div>
                
                <!-- 点线 -->
                <div class="demo-item dotted-demo">
                    <div>
                        <div>点线</div>
                        <div>dotted</div>
                    </div>
                    <div>
                        点线装饰效果
                    </div>
                </div>
                
                <!-- 虚线 -->
                <div class="demo-item dashed-demo">
                    <div>
                        <div>虚线</div>
                        <div>dashed</div>
                    </div>
                    <div>
                        虚线装饰效果
                    </div>
                </div>
            </div>
        </section>
        
        <section>
            <h2>3. 高级装饰线控制</h2>
            
            <div>
                <!-- 自定义粗细 -->
                <div class="demo-item thick-demo">
                    <div>
                        <div>自定义粗细</div>
                        <div>thickness: 3px</div>
                    </div>
                    <div>
                        加粗装饰线效果
                    </div>
                </div>
                
                <!-- 自定义颜色 -->
                <div class="demo-item colored-demo">
                    <div>
                        <div>自定义颜色</div>
                        <div>color: #e74c3c</div>
                    </div>
                    <div>
                        红色装饰线效果
                    </div>
                </div>
            </div>
            
            <div>
                <div>
                    <strong>专业提示：</strong>使用 <code>text-underline-position: under;</code> 可以将下划线放置在文本基线下方，避免与字符的降部（如 g, j, y 的下半部分）重叠，提高可读性。
                </div>
            </div>
        </section>
        
        <section>
            <h2>4. 属性详细说明表</h2>
            
            <table>
                <thead>
                    <tr>
                        <th>属性</th>
                        <th>描述</th>
                        <th>可选值</th>
                        <th>默认值</th>
                        <th>继承性</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>text-decoration</strong></td>
                        <td>装饰线简写属性</td>
                        <td>line style color thickness 的组合</td>
                        <td>none</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td><strong>text-decoration-line</strong></td>
                        <td>装饰线类型</td>
                        <td>none, underline, overline, line-through</td>
                        <td>none</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td><strong>text-decoration-style</strong></td>
                        <td>装饰线样式</td>
                        <td>solid, double, dotted, dashed, wavy</td>
                        <td>solid</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td><strong>text-decoration-color</strong></td>
                        <td>装饰线颜色</td>
                        <td>任意颜色值</td>
                        <td>currentColor</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td><strong>text-decoration-thickness</strong></td>
                        <td>装饰线粗细</td>
                        <td>auto, from-font, 长度值, 百分比</td>
                        <td>auto</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td><strong>text-underline-position</strong></td>
                        <td>下划线位置</td>
                        <td>auto, under, from-font</td>
                        <td>auto</td>
                        <td>是</td>
                    </tr>
                </tbody>
            </table>
        </section>
        
        <section>
            <h2>5. 代码示例与实用技巧</h2>
            
            <div>
<span>/* 1. 基础使用示例 */</span>
<span>.underline-example</span> {
    <span>text-decoration</span>: <span>underline</span>;
}
<span>/* 2. 完整简写属性 */</span>
<span>.complete-example</span> {
    <span>text-decoration</span>: <span>underline wavy #e74c3c 2px</span>;
}
<span>/* 3. 分离属性写法（更易维护） */</span>
<span>.separate-example</span> {
    <span>text-decoration-line</span>: <span>underline</span>;
    <span>text-decoration-style</span>: <span>wavy</span>;
    <span>text-decoration-color</span>: <span>#3498db</span>;
    <span>text-decoration-thickness</span>: <span>0.1em</span>;
    <span>text-underline-position</span>: <span>under</span>;
}
<span>/* 4. 链接样式美化 */</span>
<span>a.custom-link</span> {
    <span>text-decoration</span>: <span>none</span>;
    <span>color</span>: <span>#2c3e50</span>;
    <span>border-bottom</span>: <span>2px dotted #3498db</span>;
    <span>transition</span>: <span>all 0.3s ease</span>;
}
<span>a.custom-link:hover</span> {
    <span>text-decoration</span>: <span>none</span>;
    <span>border-bottom</span>: <span>2px solid #e74c3c</span>;
    <span>color</span>: <span>#e74c3c</span>;
}
<span>/* 5. 价格显示样式 */</span>
<span>.original-price</span> {
    <span>text-decoration</span>: <span>line-through red double 2px</span>;
    <span>color</span>: <span>#95a5a6</span>;
}
<span>/* 6. 重点强调文本 */</span>
<span>.important-text</span> {
    <span>text-decoration</span>: <span>underline wavy #f39c12 3px</span>;
    <span>text-underline-position</span>: <span>under</span>;
}
            </div>
            
            <div>
                <h3>链接美化示例</h3>
                <a href="#" style="text-decoration: none; border-bottom: 2px dotted #3498db; padding: 10px 20px; display: inline-block; margin: 15px;">
                    悬停查看动态装饰效果
                </a>
            </div>
        </section>
        
        <section>
            <h2>6. 注意事项与最佳实践</h2>
            
            <div>
                <div>
                    <strong>重要提醒：</strong>
                    <ul style="margin-top: 10px; padding-left: 20px;">
                        <li><code>text-decoration</code> 属性不会被子元素继承，每个元素需要单独设置</li>
                        <li>如果父元素有装饰线，子元素可以使用 <code>text-decoration: none;</code> 移除</li>
                        <li><code>blink</code> 值已被废弃，现代浏览器不再支持闪烁效果</li>
                        <li>多个装饰线会按照声明的顺序从上到下绘制</li>
                        <li>装饰线的渲染可能会受到字体和浏览器的影响</li>
                    </ul>
                </div>
            </div>
            
            <div>
                <div>
                    <strong>最佳实践建议：</strong>
                    <ol style="margin-top: 10px; padding-left: 20px;">
                        <li><strong>可访问性：</strong>避免仅使用装饰线传达重要信息（色盲用户可能看不到颜色差异）</li>
                        <li><strong>响应式设计：</strong>在小屏幕上考虑减小装饰线厚度</li>
                        <li><strong>性能：</strong>复杂的装饰线（尤其是wavy）可能会影响渲染性能</li>
                        <li><strong>浏览器兼容：</strong>使用渐进增强策略，为不支持新特性的浏览器提供回退方案</li>
                        <li><strong>链接样式：</strong>使用 <code>text-decoration-skip-ink: auto;</code> 避免装饰线与字符重叠</li>
                    </ol>
                </div>
            </div>
        </section>
        
        <section>
            <h2>7. 浏览器兼容性</h2>
            
            <table>
                <thead>
                    <tr>
                        <th>属性/特性</th>
                        <th>Chrome</th>
                        <th>Firefox</th>
                        <th>Safari</th>
                        <th>Edge</th>
                        <th>建议</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>基础text-decoration</td>
                        <td>1.0+</td>
                        <td>1.0+</td>
                        <td>1.0+</td>
                        <td>12+</td>
                        <td>安全使用</td>
                    </tr>
                    <tr>
                        <td>text-decoration-color</td>
                        <td>57+</td>
                        <td>36+</td>
                        <td>12.1+</td>
                        <td>79+</td>
                        <td>现代浏览器</td>
                    </tr>
                    <tr>
                        <td>text-decoration-style</td>
                        <td>57+</td>
                        <td>36+</td>
                        <td>12.1+</td>
                        <td>79+</td>
                        <td>现代浏览器</td>
                    </tr>
                    <tr>
                        <td>text-decoration-thickness</td>
                        <td>89+</td>
                        <td>70+</td>
                        <td>12.1+</td>
                        <td>89+</td>
                        <td>添加回退</td>
                    </tr>
                    <tr>
                        <td>简写属性多值</td>
                        <td>57+</td>
                        <td>36+</td>
                        <td>12.1+</td>
                        <td>79+</td>
                        <td>推荐使用</td>
                    </tr>
                </tbody>
            </table>
        </section>
        
        <footer>
            <p>CSS text-decoration 属性详解 | 最后更新: 2024年</p>
            <p>提示：合理使用 text-decoration 可以显著提升文本的视觉层次和用户体验</p>
        </footer>
    </div>
</body>
</html>

六、实用技巧与高级应用

1. 创建自定义下划线

/* 使用边框模拟更灵活的下划线 */
.custom-underline {
    text-decoration: none;
    position: relative;
}
.custom-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #3498db, #9b59b6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.custom-underline:hover::after {
    transform: scaleX(1);
}

2. 响应式装饰线

/* 根据屏幕大小调整装饰线 */
.responsive-decoration {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
@media (max-width: 768px) {
    .responsive-decoration {
        text-decoration-thickness: 1px; /* 小屏幕更细 */
    }
}

3. 组合使用技巧

/* 价格标签样式 */
.price-tag {
    display: inline-block;
    padding: 5px 15px;
    background: #f8f9fa;
    border-radius: 5px;
}
.original-price {
    text-decoration: line-through red double;
    color: #95a5a6;
    font-size: 0.9em;
}
.current-price {
    color: #2ecc71;
    font-weight: bold;
    margin-left: 10px;
}

七、常见问题解决方案

问题1：装饰线与文字重叠

.solution {
    text-underline-position: under; /* 下划线在基线下方 */
    text-decoration-skip-ink: auto; /* 避开字符降部 */
}

问题2：继承问题

.parent {
    text-decoration: underline;
}
.child {
    text-decoration: none; /* 移除继承的装饰线 */
    /* 或者 */
    text-decoration: inherit; /* 显式继承 */
}

问题3：多行文本装饰线

.multiline {
    display: inline;
    text-decoration: underline wavy;
    text-decoration-thickness: 2px;
    /* 注意：装饰线会穿过整个元素，包括换行 */
}

八、总结要点

text-decoration 是简写属性：可以同时设置线的类型、样式、颜色和粗细
不继承：子元素不会自动继承父元素的装饰线
顺序重要：多个装饰线会按声明顺序绘制
现代特性：text-decoration-thickness 和 text-underline-position 提供了更精细的控制
性能考虑：复杂装饰线（特别是wavy）可能影响渲染性能
可访问性：不要仅依赖装饰线传达重要信息

九、现代替代方案

虽然 text-decoration 是标准方法，但有时可以使用其他技术：

/* 使用边框实现更灵活的控制 */
.border-underline {
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}
/* 使用伪元素实现渐变下划线 */
.gradient-underline {
    position: relative;
    text-decoration: none;
}
.gradient-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, red, blue);
}

text-decoration 属性提供了强大的文本装饰能力，从简单的下划线到复杂的波浪装饰线。合理使用这些属性可以创建出既美观又实用的文本效果，提升用户体验和界面视觉吸引力。

标签：