CSS 文本样式与阴影整理笔记

一、行高（line-height）

二、文本样式属性

[1.text-transform - 大小写转换](#1.text-transform - 大小写转换)

[2.text-decoration - 文本修饰线](#2.text-decoration - 文本修饰线)

[3.letter-spacing - 字符间距](#3.letter-spacing - 字符间距)

[4.word-spacing - 单词间距](#4.word-spacing - 单词间距)

[5.text-align - 文本对齐](#5.text-align - 文本对齐)

[6.text-indent - 首行缩进](#6.text-indent - 首行缩进)

[7.white-space - 空白处理](#7.white-space - 空白处理)

[8.text-overflow - 文本溢出](#8.text-overflow - 文本溢出)

[9.vertical-align - 垂直对齐](#9.vertical-align - 垂直对齐)

[10.text-shadow - 文字阴影](#10.text-shadow - 文字阴影)

[11.box-shadow - 盒子阴影](#11.box-shadow - 盒子阴影)

一、行高（line-height）

定义：文字实际占据的高度由上间距、文字大小和下间距组成。

作用：

当元素高度（height）与行高（line-height）相同时，可实现单行文本垂直居中
控制多行文本的行间距

取值方式：

固定值（如：line-height: 30px;）
数值倍数（如：line-height: 1.5;，表示字体大小的1.5倍）
通过font简写属性设置（如：font: italic bold 20px/1.5 serif;）

二、文本样式属性

1.text-transform - 大小写转换

控制英文字母大小写显示：

none：默认显示
capitalize：单词首字母大写
uppercase：全大写
lowercase：全小写

2.text-decoration - 文本修饰线

添加文本装饰效果：

none：无修饰（默认）
underline：下划线
overline：上划线
line-through：删除线

常用于去除链接下划线：

css 复制代码

a { text-decoration: none; }

3.letter-spacing - 字符间距

控制字符间距：

css 复制代码

letter-spacing: 3px;

4.word-spacing - 单词间距

以空格为单位设置单词间距：

css 复制代码

word-spacing: 20px;

5.text-align - 文本对齐

控制水平对齐方式：

left：左对齐（默认）
right：右对齐
center：居中对齐

注意：仅对块级元素或设置了宽度的元素有效

6.text-indent - 首行缩进

设置段落首行缩进：

css 复制代码

text-indent: 2em; /* 缩进两个字符宽度 */

技巧：设置较大负值可隐藏文本

7.white-space - 空白处理

控制空白和换行处理：

normal：自动换行（默认）
nowrap：禁止换行
pre：保留空格和换行（类似<pre>标签效果）

8.text-overflow - 文本溢出

控制文本溢出显示方式：

css 复制代码

/* 单行文本省略号效果 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;

9.vertical-align - 垂直对齐

设置行内/行内块元素的垂直对齐：

baseline：基线对齐（默认）
top：顶端对齐
middle：居中对齐
bottom：底端对齐

常见问题：解决图片下方3px空白

原因：图片默认行内块元素，与文字基线对齐

解决方法：

css 复制代码

/* 方法1 */
img { vertical-align: middle; }
/* 方法2 */
img { display: block; }
/* 方法3 */
.parent { font-size: 0; }
/* 方法4 */
img { float: left; }

10.text-shadow - 文字阴影

语法：

css 复制代码

text-shadow: h-shadow v-shadow [blur] [color];

参数：

h-shadow：水平偏移（必需）
v-shadow：垂直偏移（必需）
blur：模糊半径（可选）
color：阴影颜色（可选）

示例：

css 复制代码

text-shadow: 5px 5px 10px gray;

11.box-shadow - 盒子阴影

语法：

css 复制代码

box-shadow: h-shadow v-shadow [blur] [color];

示例：

css 复制代码

box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);