前言

开始教程

基本语法

text-shadow 属性的语法如下：

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

• h-offset: 水平偏移量（必填）
• v-offset: 垂直偏移量（必填）
• blur-radius: 模糊半径（可选）
• color: 阴影颜色（可选）

示例代码

1. 基本文字阴影

以下是一个简单的例子，给文字添加一个基本的阴影效果。

<style>
.shadow-text {
  font-size: 20px;
  color: #333;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
<div class="shadow-text">
  这是带有阴影的文字
</div>

在这个例子中，text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);表示阴影向右偏移2px，向下偏移2px，模糊半径为5px，颜色为半透明的黑色。

2. 多重阴影效果

可以给文字添加多个阴影效果，只需用逗号分隔每个阴影的属性。

<style>
.multiple-shadow-text {
  font-size: 20px;
  color: #333;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 
		2px -2px 5px rgba(255, 255, 255, 0.5);
}
</style>
<div class="multiple-shadow-text">
  这是带有多重阴影的文字
</div>

在这个例子中，文字同时具有向右下和左上的阴影效果。

3. 阴影动画效果

还可以通过CSS动画让阴影动起来，增加动态效果。

<style>
@keyframes shadow-animate {
	0% {
	text-shadow:2px 2px 5px rgba(0,0,0,0.5)
	}
	50% {
	text-shadow:-2px -2px 5px rgba(0,0,0,0.5)
	}
	100% {
	text-shadow:2px 2px 5px rgba(0,0,0,0.5)
	}
}
.animated-shadow-text {
	font-size:20px;
	color:#333;
	animation:shadow-animate 2s infinite
}
</style>
<div class="animated-shadow-text">
  这是带有动画阴影的文字
</div>

在这个例子中，阴影会在2秒内从右下移动到左上，再回到右下，形成一个循环动画。

总结

通过 text-shadow 属性，你可以轻松地为文字添加各种阴影效果，甚至可以通过动画让阴影动起来。这种方法在提升网页视觉效果时非常有用。

希望这篇教程对你有所帮助！如果有任何问题，欢迎随时提问。