CSS text-shadow属性详解

*TQK*2025-03-24 19:54

text-shadow 是 CSS 中用来给文字添加阴影效果的属性，它的四个属性值可以理解为控制影子的四个特征，用一句话概括就是：影子往哪边偏移、有多模糊、是什么颜色。四个值按顺序排列如下：

html 复制代码

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

用通俗的例子解释：

假设你拿手电筒照文字，影子会投在桌面上：

水平偏移（正右负左）

→ 影子向左或向右偏移多少。

→ 比如 2px 表示影子向右移动 2 像素，-2px 则向左。

垂直偏移（正下负上）

→ 影子向上或向下偏移多少。

→ 比如 3px 表示影子向下移动 3 像素，-3px 则向上。

模糊半径

→ 影子的模糊程度，数值越大越模糊。

→ 比如 5px 表示影子边缘模糊 5 像素，0 则完全不模糊（清晰锐利）。

颜色

→ 影子的颜色，默认和文字颜色一致。

→ 比如 red 会让影子变成红色，也可以用 #FF0000 或 rgb(255,0,0)。

举个完整例子：

html 复制代码

text-shadow: 2px 3px 5px red;

html 复制代码

<!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;