在现代前端开发中，阴影效果（shadow effect）是一种常用的视觉设计手段，可以让元素看起来更具层次感和立体感。CSS 提供了两种常见的阴影属性：box-shadow 和 text-shadow。这篇文章将详细介绍这两个属性的用法，并给出代码示例。
一、box-shadow
box-shadow 属性用于为元素的框（box）添加阴影效果，其基本语法如下：
box-shadow: h-offset v-offset blur radius spread color inset;
h-offset：阴影相对于元素的水平偏移量（必需）。v-offset：阴影相对于元素的垂直偏移量（必需）。blur：阴影的模糊程度（可选，默认为 0）。radius：阴影的扩展程度（可选，默认为 0）。color：阴影的颜色（可选，默认为 rgba(0, 0, 0, 0.5)）。inset：将阴影设为内阴影，默认为外阴影（可选）。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-shadow 示例</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 50px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s ease;
}
.box:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上述代码中，我们创建了一个宽高为 200px 的方块，并为其添加了一个阴影。当鼠标悬停在方块上时，阴影会变得更大，更加明显，形成一种浮动的效果。
二、text-shadow
text-shadow 属性用于为文本添加阴影效果，其基本语法如下：
text-shadow: h-shadow v-shadow blur color;
h-shadow：阴影相对于文本的水平偏移量（必需）。v-shadow：阴影相对于文本的垂直偏移量（必需）。blur：阴影的模糊程度（可选，默认为 0）。color：阴影的颜色（可选，默认为 rgba(0,0,0,0.5)）。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow 示例</title>
<style>
.text {
font-size: 50px;
color: #e74c3c;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}
.text:hover {
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<h1 class="text">Hello, World!</h1>
</body>
</html>
在这个示例中，我们为文本“Hello, World!” 应用了 text-shadow 属性，使得文本在视觉上更加突出。当鼠标悬停时，阴影的偏移量和模糊程度都增加，形成动态的效果。
总结
box-shadow 和 text-shadow 是 CSS 中强大的阴影效果属性，可以通过简单的参数设置，为你的网页增添深度和Visual Appeal。通过结合使用这两种属性，可以使界面元素和文本更加引人注目。希望本文能帮助你理解并应用这两个 CSS 属性。
