1. 前言
CSS 的阴影效果能给网页增加平面感以及层次感，提高用户体验，是页面设计中常用的效果之一。本文将详细介绍如何使用 CSS 为元素添加阴影。
2. box-shadow 属性
2.1 语法
box-shadow 属性是 CSS3 中新增的属性，它可以为元素添加阴影效果。它的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必须的属性，水平偏移量。可以为正值、负值、0，分别表示向右、向左、不偏移。
v-shadow：必须的属性，垂直偏移量。可以为正值、负值、0，分别表示向下、向上、不偏移。
blur：可选属性，模糊半径。可以为正值、0，分别表示模糊半径和无模糊效果。
spread：可选属性，阴影扩散半径。可以为正值、负值、0，分别表示扩散半径、收缩半径和无扩散效果。
color：可选属性，阴影颜色。默认为 black。
inset：可选属性，内阴影效果。如果不加此属性，则生成外阴影效果。
2.2 实例
下面是一个简单的实例，展示 box-shadow 属性的使用：
.box {
width: 200px;
height: 200px;
background-color: #f5f5f5;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
上面的代码为大小为 200px * 200px 的 .box 元素添加了一个向右 5px、向下 5px 的偏移量，10px 的模糊半径，深灰色的阴影效果。
3. text-shadow 属性
3.1 语法
text-shadow 属性是用来为文本添加阴影效果，它的语法如下：
text-shadow: h-shadow v-shadow blur color;
h-shadow：必须的属性，水平偏移量。可以为正值、负值、0，分别表示向右、向左、不偏移。
v-shadow：必须的属性，垂直偏移量。可以为正值、负值、0，分别表示向下、向上、不偏移。
blur：可选属性，模糊半径。可以为正值、0，分别表示模糊半径和无模糊效果。
color：可选属性，阴影颜色。默认为 black。
3.2 实例
下面是一个简单的实例，展示 text-shadow 属性的使用：
h1 {
text-shadow: 0 2px 2px #ccc;
}
上面的代码为 h1 标签添加了一个向下 2px 的偏移量，2px 的模糊半径，浅灰色的阴影效果。
4. 注意事项
在使用 box-shadow 和 text-shadow 属性时，需要注意以下几点：
IE8 及更早版本不支持 box-shadow 和 text-shadow 属性。可以考虑使用滤镜或另一种方法实现阴影效果。
在使用 text-shadow 属性时，需要注意浏览器兼容性问题。
阴影效果的性能问题。如果过多使用阴影效果，会降低页面的性能。建议在使用时考虑好效果和性能的平衡。
5. 结语
本文介绍了使用 box-shadow 和 text-shadow 属性为元素添加阴影效果的方法，希望对读者有所帮助。