编辑“︁CSS文本装饰”︁（章节）

= CSS文本装饰 =

'''CSS文本装饰'''（Text Decoration）是CSS中用于控制文本装饰效果的属性集合，主要包括下划线、删除线、上划线以及文本阴影等视觉效果。这些属性可以增强文本的可读性或实现特定的设计需求。

== 基本属性 ==

=== text-decoration-line ===
该属性指定文本装饰线的类型，可接受以下值：
* <code>underline</code>：下划线
* <code>overline</code>：上划线
* <code>line-through</code>：删除线
* <code>none</code>：无装饰线

<syntaxhighlight lang="css">
.underline {
  text-decoration-line: underline;
}
</syntaxhighlight>

输出效果：
<div style="text-decoration: underline">这段文本有下划线</div>

=== text-decoration-color ===
设置装饰线的颜色：

<syntaxhighlight lang="css">
.red-underline {
  text-decoration-line: underline;
  text-decoration-color: red;
}
</syntaxhighlight>

=== text-decoration-style ===
定义装饰线的样式：
* <code>solid</code>：实线（默认）
* <code>double</code>：双线
* <code>dotted</code>：点线
* <code>dashed</code>：虚线
* <code>wavy</code>：波浪线

<syntaxhighlight lang="css">
.wavy-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
</syntaxhighlight>

== 简写属性 ==
<code>text-decoration</code>是上述属性的简写形式，语法为：
<code>text-decoration: line style color;</code>

示例：
<syntaxhighlight lang="css">
.fancy-decoration {
  text-decoration: underline wavy blue;
}
</syntaxhighlight>

== 高级应用 ==

=== 多重装饰 ===
可以同时应用多种装饰线：

<syntaxhighlight lang="css">
.multiple {
  text-decoration-line: underline overline;
}
</syntaxhighlight>

=== 文本阴影 ===
<code>text-shadow</code>属性为文本添加阴影效果：
<code>text-shadow: h-shadow v-shadow blur-radius color;</code>

示例：
<syntaxhighlight lang="css">
.shadow-text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</syntaxhighlight>

== 实际应用案例 ==

=== 链接样式 ===
修改链接的下划线样式：

<syntaxhighlight lang="css">
a {
  text-decoration: none;
  border-bottom: 1px dotted blue;
}

a:hover {
  text-decoration: underline solid red;
}
</syntaxhighlight>

=== 价格显示 ===
显示原价和折扣价：

<syntaxhighlight lang="html">
<p class="original-price">$99.99</p>
<p class="sale-price">$79.99</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
.original-price {
  text-decoration: line-through;
  color: gray;
}

.sale-price {
  color: red;
  font-weight: bold;
}
</syntaxhighlight>

== 浏览器兼容性 ==

大多数现代浏览器都完全支持CSS文本装饰属性。对于旧版浏览器，可以使用以下前缀：
* <code>-webkit-</code> (Chrome, Safari)
* <code>-moz-</code> (Firefox)
* <code>-ms-</code> (IE)

== 最佳实践 ==

1. 保持装饰的一致性
2. 避免过度使用装饰效果
3. 确保装饰后的文本仍然可读
4. 考虑色盲用户的视觉体验

== 参见 ==

* [[CSS字体]]
* [[CSS文本样式]]
* [[CSS盒模型]]

<mermaid>
graph TD
    A[文本装饰] --> B[装饰线]
    A --> C[装饰颜色]
    A --> D[装饰样式]
    A --> E[文本阴影]
    B --> F[下划线]
    B --> G[上划线]
    B --> H[删除线]
    D --> I[实线]
    D --> J[虚线]
    D --> K[波浪线]
</mermaid>

<math>
\text{text-shadow} = \text{h-shadow} \quad \text{v-shadow} \quad \text{blur-radius} \quad \text{color}
</math>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]