css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？
在网页设计中常常要使用到阴影效果，通过阴影效果可以很好的突出一个元素，在 CSS3 出现之前，我们想要为文本或者元素添加阴影效果需要借助图像才能实现，很不方便。而 CSS3 出现之后，我们通过 text-shadow 和 box-shadow 两个属性就可以为文本或元素添加阴影效果，不需要借助任何图像。
1. text-shadow
使用 CSS 的 text-shadow 属性我们可以为文本设置阴影效果，属性的语法格式如下：
text-shadow: offset-x offset-y blur color;
语法说明如下：
（1）offset-x：必填参数，设置阴影的水平偏移量，可以为负值；
（2）offset-y：必填参数，设置阴影的垂直偏移量，可以为负值；
（3）blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
（4）color：可选参数，设置阴影的颜色，如果省略或未指定该值，则采用 color 属性的值。
提示：使用 text-shadow 属性可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推。另外，若要取消文本的阴影效果则可以将 text-shadow 属性的值设置为 none。
【示例】使用 text-shadow 属性为文本添加阴影效果：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>text-shadow</title>
</head>
<style>
div:first-child {
text-shadow: 5px 8px 3px red;
}
</style>
<body>
<div>文字阴影</div>
</body>
</html>运行结果：
解析：text-shadow: 5px 8px 3px red; 参数说明
| 参数位置 | 参数 | 解释 | 例中解释 |
| 1 | offset-x | x轴偏移 (让下面文字左右移动位置) | 让下面文字左移5px |
| 2 | offset-y | y轴偏移 (让下面文字上下移动位置) | 让下面盒子下移8px |
| 3 | blur | 模糊程度 (控制下面文字的模糊程度) | 模糊程度 |
| 4 | color | 颜色 (控制下面文字的颜色) | 让下面文字颜色为红色 |
2. box-shadow
使用 CSS 的 box-shadow 属性我们可以为 HTML 元素设置阴影效果，属性的语法格式如下：
box-shadow: h-shadow v-shadow blur spread color inset;
语法说明如下：
（1）h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
（2）v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
（3）blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
（4）spread：可选参数，设置阴影的尺寸；
（5）color：可选参数，设置阴影的颜色；
（6）inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。
提示：与 text-shadow 属性相似，box-shadow 属性也可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推。
【示例】使用 box-shadow 属性为文本添加阴影效果：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>box-shadow</title>
</head>
<style>
div:first-child {
width: 200px;
height: 200px;
border: 1px solid black;
box-shadow: 5px 8px 3px 2px red;
}
</style>
<body>
<div></div>
</body>
</html>运行结果：
解析：box-shadow: 5px 8px 3px 2px red; 参数说明
| 参数位置 | 参数 | 解释 | 例中解释 |
| 1 | offset-x | x轴偏移 (让下面盒子左右移动位置) | 让下面盒子左移5px |
| 2 | offset-y | y轴偏移 (让下面盒子上下移动位置) | 让下面盒子下移8px |
| 3 | blur | 模糊程度 (控制下面盒子的模糊程度) | 模糊程度 |
| 4 | spread | 阴影大小 (控制下面盒子的大小) | 让下面盒子宽高各加3px |
| 5 | color | 颜色 (控制下面盒子的颜色) | 让下面盒子颜色为红色 |
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的：零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程