CSS 文本样式与阴影属性

一、前言

本文整理了 CSS 中文本排版、行高控制、对齐方式、阴影效果等核心属性的用法，结合代码案例讲解，帮助快速掌握文本样式的精细化控制。

二、 行高（line-height）

1. 核心概念

行高 = 上间距 + 文字大小 + 下间距，上间距 = 下间距。

2. 核心作用

• 实现文本垂直居中：将容器 height 与 line-height 设置为相同值。
• 控制多行文本的行间距。

3. 语法与取值

/* 方式1：直接写长度单位 */
line-height: 30px;
/* 方式2：写数值（倍数），基于当前字体大小 */
line-height: 1.5;
/* 方式3：在font属性中简写 [字体样式 字重 字号/行高 字体族] */
font: italic bold 30px/2 serif;

4. 代码案例

li {
  height: 80px;
  line-height: 80px; /* 实现文本垂直居中 */
  background-color: #ccc;
}

三、 文本样式核心属性

1. 文本大小写转换（text-transform）

仅对英文有效，取值如下：

取值	效果
none	默认值，文本正常显示
capitalize	每个单词首字母大写
uppercase	所有字母大写
lowercase	所有字母小写

2. 文本修饰（text-decoration）

控制文本下划线、删除线等效果：

取值	效果
none	默认值，无修饰（常用于清除 a 标签下划线）
underline	下划线
overline	上划线
line-through	删除线

3. 字符 / 单词间距

• letter-spacing ：设置字符间距 （中英文均生效）

  letter-spacing: 3px; /* 字符之间间隔3px */

• word-spacing ：设置单词间距 （以空格为分隔符，仅英文生效）

  word-spacing: 20px; /* 单词之间间隔20px */

4. 文本对齐（text-align）

控制块级元素内文本的水平对齐方式，行内元素无效。

取值	效果
left	左对齐（默认）
right	右对齐
center	居中对齐

5. 首行缩进（text-indent）

控制文本首行缩进，支持正负值：

p {
  text-indent: 2em; /* 首行缩进2个字符宽度 */
  text-indent: -100px; /* 向左缩进（可用于隐藏文字） */
}

6. 单行文本省略号（高频面试题）

核心三属性：

h1 {
  width: 200px; /* 限定容器宽度 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

7. 垂直对齐（vertical-align）

（1）核心作用

• 控制行内元素 / 行内块元素的垂直对齐方式（如图片与文字对齐）。
• 解决图片底部默认留白问题。

（2）常用取值

取值	效果
baseline	基线对齐（默认，字母 x 的底部）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

（3） 解决图片留白的 4 种方法

/* 方法1：设置vertical-align为非baseline值 */
img { vertical-align: top; }
/* 方法2：将图片转为块级元素 */
img { display: block; }
/* 方法3：设置父元素font-size为0 */
.box1 { font-size: 0; }
/* 方法4：让图片脱离文档流（如浮动） */
img { float: left; }

四、 阴影效果

1. 文本阴影（text-shadow）

语法

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

参数	说明	是否必填
h-shadow	水平偏移量（正值右移，负值左移）	是
v-shadow	垂直偏移量（正值下移，负值上移）	是
blur	模糊半径（值越大越模糊，默认 0）	否
color	阴影颜色（默认与文本颜色一致）	否

案例

h1 {
  color: red;
  text-shadow: 10px 10px 5px #ccc; /* 右下偏移10px，模糊5px，灰色阴影 */
}

2. 盒子阴影（box-shadow）

语法

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

参数含义与 text-shadow 一致，区别是作用于元素盒子而非文本。

案例

.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  box-shadow: 10px 10px 5px #666; /* 右下阴影，模糊5px */
}

五、 总结

1. 行高 line-height 是实现文本垂直居中的核心属性，简写时需注意 font 属性的顺序。
2. 单行文本省略号需要 宽度 + 不换行 + 隐藏溢出 + 省略号 四属性配合。
3. vertical-align 专门解决行内元素垂直对齐问题，是处理图片留白的关键。
4. 阴影属性 text-shadow/box-shadow 参数一致，作用对象不同，可通过模糊半径控制阴影柔和度。