7.1 text-decoration 属性
CSS 提供了各种属性来样式化和装饰网页上的文字。属性 text-decoration、text-transform 和 text-shadow 允许添加下划线、改变文字大小写和创建阴影，这有助于使文本更加生动和吸引人。
text-decoration 属性控制文本的装饰效果，如下划线、上划线和删除线。它还允许设置用于装饰文本的线条的颜色和样式。
取值：
none: 移除所有文本装饰underline: 为文本添加下划线overline: 在文本上方添加一条线line-through: 添加穿过文本的线（删除线）blink: 文本闪烁（不是所有浏览器都支持）text-decoration-color: 设置装饰线的颜色text-decoration-style: 设置线条样式（solid, double, dotted, dashed, wavy）text-decoration-thickness: 设置装饰线的厚度
用法示例：
CSS
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
HTML
<body>
<p class="underline">这个文本有下划线。</p>
<p class="overline">这个文本有上划线。</p>
<p class="line-through">这个文本有删除线。</p>
<p class="custom-decoration">这个文本有红色波浪下划线。</p>
</body>
7.2 text-transform 属性
text-transform 属性管理文本的转换，改变字母的大小写。对于自动将文本更改为标题、小写字母等非常有用。
取值：
none: 无转换（默认值）capitalize: 每个单词的首字母大写uppercase: 所有字母大写lowercase: 所有字母小写full-width: 将文本转换为全宽（双倍大小）（不是所有浏览器都支持）
用法示例：
CSS
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
HTML
<body>
<p class="capitalize">每个单词的首字母将大写。</p>
<p class="uppercase">这个文本将全部大写。</p>
<p class="lowercase">这个文本将全部小写。</p>
</body>
7.3 text-shadow 属性
text-shadow 属性为文本添加阴影，允许创建视觉效果并提高网页上的文本可读性。
取值：
<offset-x>: 阴影在 X 轴上的偏移（水平）<offset-y>: 阴影在 Y 轴上的偏移（垂直）<blur-radius>: 阴影模糊半径（可选）<color>: 阴影颜色（可选）
用法示例：
CSS
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
HTML
<body>
<p class="text-shadow">这个文本有阴影。</p>
<p class="multiple-shadows">这个文本有多个阴影。</p>
</body>
代码解释：
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: 添加一个阴影，水平偏移 2px，垂直偏移 3px，模糊半径 4px，并使用半透明黑色text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: 添加两个不同参数的阴影，创建更复杂的视觉效果
GO TO FULL VERSION