上查看所有课程
CSS text-shadow 属性用于为文本添加阴影。例如，
h1 {
text-shadow: 1px 1px 2px red;
}浏览器输出
在这里，text-shadow 属性为 h1 元素的文本创建了红色的阴影。
文本阴影的语法
text-shadow 属性的语法如下：
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;这里，
h-shadow：指定水平阴影的长度；允许负值v-shadow：指定垂直阴影的长度；允许负值blur-radius：指定模糊阴影的值color：指定阴影的颜色none：指定默认值，无阴影initial：设置默认值inherit：继承其父元素的值
注意：水平阴影和垂直阴影的值是 text-shadow 属性所必需的。
示例：CSS 文本阴影属性
让我们来看一个 text-shadow 属性的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-shadow</title>
</head>
<body>
<h1>Pride & Prejudice (Jane Austen)</h1>
</body>
</html>h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
在这里，我们在 text-shadow 属性中使用的值是：
2px- 水平偏移2px- 垂直偏移4px- 模糊半径rgba(0, 0, 0, 0.5)- 阴影颜色 (半透明黑色)
注意：偏移是指阴影与文本元素之间的距离。
多重阴影
我们可以在 text-shadow 属性中提供逗号分隔的值列表来创建多个阴影。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-shadow</title>
</head>
<body>
<h1>Pride & Prejudice (Jane Austen)</h1>
</body>
</html>h1 {
/* create a text shadow using multiple values */
text-shadow: 1px 1px 1px black, 3px 3px 5px blue;
}浏览器输出
在上面的示例中，我们有以下 CSS 声明，它为 text-shadow 属性提供了两个值：
text-shadow: 1px 1px 1px black, 3px 3px 5px blue;这里，
1px 1px 1px black- 创建第一个阴影，具有1px的水平和垂直阴影偏移量，1px的模糊半径和黑色颜色
3px 3px 5px blue- 创建第二个阴影，具有3px的水平和垂直阴影偏移量，以及5px的模糊半径和蓝色颜色
这两种阴影的组合可以创建更复杂、视觉效果更佳的效果。