CSS文本装饰
CSS文本装饰[编辑 | 编辑源代码]
CSS文本装饰（Text Decoration）是CSS中用于控制文本装饰效果的属性集合，主要包括下划线、删除线、上划线以及文本阴影等视觉效果。这些属性可以增强文本的可读性或实现特定的设计需求。
基本属性[编辑 | 编辑源代码]
text-decoration-line[编辑 | 编辑源代码]
该属性指定文本装饰线的类型，可接受以下值：
underline：下划线overline：上划线line-through：删除线none：无装饰线
.underline {
text-decoration-line: underline;
}
输出效果：
这段文本有下划线
text-decoration-color[编辑 | 编辑源代码]
设置装饰线的颜色：
.red-underline {
text-decoration-line: underline;
text-decoration-color: red;
}
text-decoration-style[编辑 | 编辑源代码]
定义装饰线的样式：
solid：实线（默认）double：双线dotted：点线dashed：虚线wavy：波浪线
.wavy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
}
简写属性[编辑 | 编辑源代码]
text-decoration是上述属性的简写形式，语法为：
text-decoration: line style color;
示例：
.fancy-decoration {
text-decoration: underline wavy blue;
}
高级应用[编辑 | 编辑源代码]
多重装饰[编辑 | 编辑源代码]
可以同时应用多种装饰线：
.multiple {
text-decoration-line: underline overline;
}
文本阴影[编辑 | 编辑源代码]
text-shadow属性为文本添加阴影效果：
text-shadow: h-shadow v-shadow blur-radius color;
示例：
.shadow-text {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
实际应用案例[编辑 | 编辑源代码]
链接样式[编辑 | 编辑源代码]
修改链接的下划线样式：
a {
text-decoration: none;
border-bottom: 1px dotted blue;
}
a:hover {
text-decoration: underline solid red;
}
价格显示[编辑 | 编辑源代码]
显示原价和折扣价：
<p class="original-price">$99.99</p>
<p class="sale-price">$79.99</p>
.original-price {
text-decoration: line-through;
color: gray;
}
.sale-price {
color: red;
font-weight: bold;
}
浏览器兼容性[编辑 | 编辑源代码]
大多数现代浏览器都完全支持CSS文本装饰属性。对于旧版浏览器，可以使用以下前缀：
-webkit-(Chrome, Safari)-moz-(Firefox)-ms-(IE)
最佳实践[编辑 | 编辑源代码]
1. 保持装饰的一致性 2. 避免过度使用装饰效果 3. 确保装饰后的文本仍然可读 4. 考虑色盲用户的视觉体验
参见[编辑 | 编辑源代码]