CSS text-decoration 属性-代码号

CSS text-decoration 属性详解：文本装饰效果指南

属性概述

CSS text-decoration 属性是网页样式设计中的重要工具，用于为文本内容添加各种视觉装饰效果。该属性可以控制文本的下划线、上划线、删除线等样式，是提升文本视觉效果和用户体验的关键CSS属性之一。

语法结构

基础语法

/* 应用单个文本装饰效果 */
selector {
  text-decoration: value;
}

/* 应用多个文本装饰效果 */
selector {
  text-decoration: value1 value2 value3 ...;
}

完整语法格式

text-decoration: [text-decoration-line] || 
                 [text-decoration-style] || 
                 [text-decoration-color] || 
                 [text-decoration-thickness];

属性值详解

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

none：无装饰效果（默认值）
underline：文本下方添加下划线
overline：文本上方添加上划线
line-through：文本中间添加删除线
blink：文本闪烁效果（已废弃，不推荐使用）

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

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

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

支持所有CSS颜色值
默认使用文本颜色

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

auto：浏览器自动计算
from-font：使用字体建议的粗细
长度值：如 2px、0.1em 等

基础应用示例

基本装饰效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰基础效果 - 代码号编程教程</title>
    <style>
        .text-demo {
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 18px;
            line-height: 2;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
            margin: 20px;
        }
        
        .underline {
            text-decoration: underline;
            color: #2c3e50;
        }
        
        .overline {
            text-decoration: overline;
            color: #e74c3c;
        }
        
        .line-through {
            text-decoration: line-through;
            color: #7f8c8d;
        }
        
        .multiple {
            text-decoration: underline overline wavy #3498db;
        }
    </style>
</head>
<body>
    <div class="text-demo">
        <p>欢迎学习<span class="underline">代码号前端编程教程</span> - 下划线效果</p>
        <p>掌握<span class="overline">CSS文本装饰技巧</span> - 上划线效果</p>
        <p>原价：<span class="line-through">￥999</span> 现价：￥599 - 删除线效果</p>
        <p><span class="multiple">多重装饰效果组合</span> - 波浪线上下划线</p>
    </div>
</body>
</html>

链接样式设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接装饰样式 - 代码号实践</title>
    <style>
        .link-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .custom-link {
            color: #2980b9;
            text-decoration: none;
            font-size: 18px;
            margin: 15px 0;
            display: inline-block;
            padding: 10px 20px;
            border-radius: 6px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        
        .custom-link:hover {
            background: #e3f2fd;
            text-decoration: underline wavy #3498db 2px;
            transform: translateY(-2px);
        }
        
        .nav-link {
            display: inline-block;
            margin: 0 20px;
            padding: 12px 24px;
            color: #2c3e50;
            text-decoration: none;
            position: relative;
            font-weight: 500;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .code-demo {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            font-family: 'Consolas', monospace;
        }
    </style>
</head>
<body>
    <div class="link-container">
        <h2>代码号资源导航</h2>
        
        <div style="text-align: center; margin: 30px 0;">
            <a href="https://www.ebingou.cn/" class="nav-link">平台首页</a>
            <a href="https://www.ebingou.cn/jiaocheng/" class="nav-link">教程中心</a>
            <a href="https://www.ebingou.cn/biancheng/" class="nav-link">编程实践</a>
            <a href="https://www.ebingou.cn/yuanma/" class="nav-link">源码下载</a>
        </div>
        
        <div class="code-demo">
            /* 链接悬停效果CSS代码 */<br>
            a:hover {<br>
            &nbsp;&nbsp;text-decoration: underline wavy #3498db 2px;<br>
            &nbsp;&nbsp;background: #e3f2fd;<br>
            }
        </div>
        
        <div>
            <a href="#" class="custom-link">前端开发教程</a>
            <a href="#" class="custom-link">JavaScript高级编程</a>
            <a href="#" class="custom-link">CSS布局实战</a>
            <a href="#" class="custom-link">响应式设计原理</a>
        </div>
    </div>
</body>
</html>

高级装饰效果

自定义下划线样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义下划线样式 - 代码号高级技巧</title>
    <style>
        .custom-underline {
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 20px;
            line-height: 1.8;
            padding: 40px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 15px;
            margin: 30px;
        }
        
        .dotted-underline {
            text-decoration: underline dotted #e74c3c;
            text-decoration-thickness: 2px;
        }
        
        .dashed-underline {
            text-decoration: underline dashed #3498db;
            text-decoration-thickness: 3px;
        }
        
        .double-underline {
            text-decoration: underline double #2ecc71;
            text-decoration-thickness: 1px;
        }
        
        .wavy-underline {
            text-decoration: underline wavy #9b59b6;
            text-decoration-thickness: 2px;
        }
        
        .gradient-underline {
            background-image: linear-gradient(90deg, #ff6b6b, #ee5a24);
            background-size: 100% 2px;
            background-repeat: no-repeat;
            background-position: bottom;
            padding-bottom: 2px;
            text-decoration: none;
        }
        
        .style-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .style-item {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="custom-underline">
        <h2>文本装饰样式展示</h2>
        
        <p>点状下划线：<span class="dotted-underline">代码号编程学习</span></p>
        <p>虚线装饰：<span class="dashed-underline">前端开发教程</span></p>
        <p>双线下划线：<span class="double-underline">CSS样式技巧</span></p>
        <p>波浪线效果：<span class="wavy-underline">JavaScript实战</span></p>
        <p>渐变下划线：<span class="gradient-underline">响应式设计</span></p>
        
        <div class="style-showcase">
            <div class="style-item">
                <span class="dotted-underline">点状样式</span>
                <p>适合次要信息标注</p>
            </div>
            <div class="style-item">
                <span class="dashed-underline">虚线样式</span>
                <p>用于临时性标注</p>
            </div>
            <div class="style-item">
                <span class="wavy-underline">波浪样式</span>
                <p>强调重要内容</p>
            </div>
        </div>
    </div>
</body>
</html>

实际应用场景

价格标签设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格标签设计 - 代码号电商示例</title>
    <style>
        .pricing-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .price-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            text-align: center;
            border: 2px solid #e8e8e8;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .price-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-color: #3498db;
        }
        
        .price-title {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .price-amount {
            font-size: 48px;
            font-weight: bold;
            color: #e74c3c;
            margin: 20px 0;
        }
        
        .original-price {
            text-decoration: line-through;
            color: #7f8c8d;
            font-size: 20px;
            margin-right: 10px;
        }
        
        .discount-badge {
            display: inline-block;
            background: #2ecc71;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            margin-left: 10px;
        }
        
        .price-features {
            list-style: none;
            padding: 0;
            margin: 30px 0;
            text-align: left;
        }
        
        .price-features li {
            padding: 12px 0;
            border-bottom: 1px solid #ecf0f1;
            color: #34495e;
        }
        
        .price-features li:last-child {
            border-bottom: none;
        }
        
        .price-features li::before {
            content: '✓';
            color: #27ae60;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .price-button {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            transition: transform 0.3s ease;
        }
        
        .price-button:hover {
            transform: scale(1.05);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="pricing-container">
        <div class="price-card">
            <h3 class="price-title">基础课程包</h3>
            <div class="price-amount">
                <span class="original-price">￥1299</span>￥599
                <span class="discount-badge">54% OFF</span>
            </div>
            <ul class="price-features">
                <li>HTML5/CSS3 基础教程</li>
                <li>JavaScript 入门课程</li>
                <li>响应式布局实战</li>
                <li>项目练习资料</li>
            </ul>
            <a href="https://www.ebingou.cn/jiaocheng/" class="price-button">立即购买</a>
        </div>
        
        <div class="price-card">
            <h3 class="price-title">进阶课程包</h3>
            <div class="price-amount">
                <span class="original-price">￥2299</span>￥999
                <span class="discount-badge">57% OFF</span>
            </div>
            <ul class="price-features">
                <li>前端框架深度解析</li>
                <li>高级JavaScript技巧</li>
                <li>性能优化指南</li>
                <li>实战项目源码</li>
            </ul>
            <a href="https://www.ebingou.cn/biancheng/" class="price-button">立即购买</a>
        </div>
        
        <div class="price-card">
            <h3 class="price-title">全栈课程包</h3>
            <div class="price-amount">
                <span class="original-price">￥3299</span>￥1499
                <span class="discount-badge">55% OFF</span>
            </div>
            <ul class="price-features">
                <li>前后端完整技术栈</li>
                <li>数据库设计与优化</li>
                <li>部署与运维指南</li>
                <li>终身技术支持</li>
            </ul>
            <a href="https://www.ebingou.cn/yuanma/" class="price-button">立即购买</a>
        </div>
    </div>
</body>
</html>

本节课程知识要点

多重装饰组合：可以同时应用多种装饰效果
样式控制：支持实线、虚线、点线、波浪线等多种样式
颜色定制：装饰线颜色可以与文本颜色不同
粗细调整：可以精确控制装饰线的粗细程度
响应式设计：装饰效果在不同设备上保持一致性
性能考虑：避免过度使用复杂的装饰效果影响性能

浏览器兼容性

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Internet Explorer 3+

注意事项

闪烁效果废弃：blink 值已废弃，不建议使用
可访问性：确保装饰效果不影响文本可读性
继承特性：子元素会继承父元素的文本装饰效果
性能优化：避免过多复杂装饰影响页面渲染性能

总结

text-decoration 属性是CSS中强大的文本样式控制工具，通过合理运用可以创建出既美观又实用的文本效果。现代CSS还提供了text-decoration-skip-ink、text-underline-offset等相关属性，进一步增强了文本装饰的控制能力。

本文标签：

CSS text-decoration 属性