1. 文本阴影（text-shadow）
1.1 基本语法
text-shadow: h-shadow v-shadow blur-radius color;
参数说明：
h-shadow：必需。水平阴影的位置。允许负值。- 正值：向右偏移
- 负值：向左偏移
v-shadow：必需。垂直阴影的位置。允许负值。- 正值：向下偏移
- 负值：向上偏移
blur-radius：可选。模糊的距离。默认为0。- 值越大，模糊效果越强
- 不允许负值
color：可选。阴影的颜色。默认为文字颜色。- 可使用各种颜色表示方法：关键字、HEX、RGB、RGBA等
1.2 常用效果示例
- 发光效果
.glow-text {color: #ffffff;text-shadow: 0 0 10px #00ff00;
}
效果图：
- 多重阴影
.multiple-shadow {text-shadow: 2px 2px 0 #ff0000,4px 4px 0 #00ff00,6px 6px 0 #0000ff;
}
效果图：
- 立体文字效果
.d3-text {color: #ffffff;text-shadow: 1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 7px 1px #919191,1px 8px 1px #919191,1px 9px 1px #919191;
}
效果图：
2. 文本溢出（text-overflow）
2.1 单行文本溢出
.single-line-ellipsis {white-space: nowrap; /* 禁止文本换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 显示省略符号 */
}
参数说明：
text-overflow可选值：clip：直接裁剪文本ellipsis：显示省略号string：使用自定义字符串（部分浏览器支持）
效果图：
2.2 多行文本溢出
.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 显示行数 */overflow: hidden;
}
参数说明：
-webkit-line-clamp：设置显示的行数- 必须是正整数
- 超出的行将被截断并显示省略号
效果图：
3. 换行处理（word-wrap & word-break）
3.1 word-wrap
.word-wrap-example {word-wrap: break-word; /* 允许在单词内换行 */
}
参数说明：
word-wrap可选值：normal：只在允许的断字点换行（默认）break-word：在单词内部换行anywhere：任意字符间都可能换行
效果图：
3.2 word-break
.word-break-example {word-break: break-all; /* 强制换行 */
}
参数说明：
word-break可选值：normal：使用默认的换行规则break-all：允许在任意字符间断行keep-all：中文/韩文/日文不断行，其他语言正常处理break-word：与word-wrap: break-word效果相同
效果图：
