CSS text-shadow属性详解
text-shadow是 CSS 中用来给文字添加阴影效果的属性，它的四个属性值可以理解为控制影子的四个特征，用一句话概括就是：影子往哪边偏移、有多模糊、是什么颜色。四个值按顺序排列如下：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;用通俗的例子解释：
假设你拿手电筒照文字，影子会投在桌面上：
水平偏移（正右负左）
→ 影子向左或向右偏移多少。
→ 比如2px表示影子向右移动 2 像素，-2px则向左。垂直偏移（正下负上）
→ 影子向上或向下偏移多少。
→ 比如3px表示影子向下移动 3 像素，-3px则向上。模糊半径
→ 影子的模糊程度，数值越大越模糊。
→ 比如5px表示影子边缘模糊 5 像素，0则完全不模糊（清晰锐利）。颜色
→ 影子的颜色，默认和文字颜色一致。
→ 比如red会让影子变成红色，也可以用#FF0000或rgb(255,0,0)。
举个完整例子：
text-shadow: 2px 3px 5px red;<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>文本外观属性</title>
<style type="text/css">
p{
font-size: 50px;
text-shadow: 2px 3px 5px red;
}
</style>
</head>
<body>
<p>HELLO CSS3</p>
</body>效果展示
这表示：
影子向右移动 2 像素
影子向下移动 3 像素
影子模糊 5 像素
影子颜色是红色
小贴士：
颜色可以省略（默认和文字颜色相同），比如：
text-shadow: 2px 2px 4px;多个阴影可以用逗号分隔叠加，比如：
text-shadow: 2px 2px 4px black, -2px -2px 4px white;