CSS 涉及设计到阴影的相关内容包括三个方面：box-shadow属性（盒子阴影）、 text-shadow属性（文本阴影）、drop-shadow滤镜。 本篇文章旨在详细介绍和分析三种阴影的具体参数设置和典型用例。
box-shadow属性（盒子阴影）
向容器div添加阴影属性，box-shadow属性可以设置一个或多个下拉阴影的框。注意：box-shadow可以给同一个元素设置多个阴影效果，并用逗号进行分隔。
box-shadow属性（盒子阴影）语法
box-shadow: h-shadow v-shadow blur spread color inset;
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。 阴影向内扩散，否则阴影向外扩散。 |
box-shadow属性（盒子阴影）属性详解
基本属性 | rgba(0，0，0，1.0)
总结：通过上面的属性演示，基本效果相信大家心里都已经有所收获。但不知道你发现没有，我们可以利用shadow属性实现更多有趣的效果。
- 利用 h-shadow 和 v-shadow 属性，可以用来模拟盒子的边框。
- 利用 h-shadow、 v-shadow、 和 spread 属性，我们可以给盒子的边框增加不同颜色。
- 结合动画，利用v-shadow 和inset(内阴影) 可以实现按钮按下去的效果
- 再想想，还能做出什么更有趣的效果呢？ 浮空？ 跳动？ 闪烁？
box-shadow属性（盒子阴影）应用案例
总结：通过上面的属性应用案例，我们知道了可以利用shadow属性实现更多有趣的效果，那么期待你去实现更多！
- 立体按钮：利用 h-shadow 属性，模拟按钮的立体效果。
- 七彩圆：利用 多重的 spread 属性，通过调整 spread 数值大小实现了七色圆环套环效果。
- 凹陷按钮：利用 blur 属性实现按钮的外部渐变，利用inset 1像素的白色阴影，实现按钮顶部的高光线效果。 当鼠标移动到按钮上，利用 inset 属性调整了阴影的灰度，以及1像素的按钮边框的高光，使按钮模拟出被按下的凹陷效果。 文字阴影的配合也恰到好处的实现了凹陷的效果。
- 闪烁的圆：利用了 blur属性 与CSS动画相结合，实现闪烁发光的效果。这个稍微调整一下，可以用来模拟太阳和月亮的发光效果。
- 进度条：利用inset 1像素的白色阴影，实现进度条顶部的高光线效果，利用inset 5像素的白色阴影，实现按钮水晶透明的材质效果（上半条高光）。利用inset阴影，模拟进度条灰色背景的凹陷效果
- 浮空卡片：利用阴影效果，实现了卡片的立体感。配合css动画，使鼠标移动到卡片上时，产生了卡片悬浮起来与投影产生分离的效果。
- 运动的小球：球体本身就是通过内阴影实现的。另外叠加的投影配合动画的放大缩小，实现了这种看起来球体由远及近的效果。
- 彩色的花：它是通过多层的彩色阴影叠加和旋转产生的，也很有趣。
text-shadow属性（文本阴影）
非常好理解，所见即所得！这个属性，就是给文本添加阴影效果。注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。- css3 允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开。
text-shadow属性（文本阴影）语法
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。正负不表示大小，只表示方向。水平向右为正，向左为负，单位是px |
| v-shadow | 必需。垂直阴影的位置。允许负值。正负不表示大小，只表示方向。水平向下为正，向上为负，单位是px |
| blur | 可选。模糊的距离。数值越大阴影越模糊，单位px |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
text-shadow属性（文本阴影）典型应用
h1{ text-shadow: 2px 2px 5px #ff0000; }
下面是这句代码的效果：水平方向向右 2 像素，垂直方向 向下2 像素，模糊距离 5 像素，颜色红色。需要注意的是, text-shadow 属性 与 box-shadow属性不同，不支持spread 属性，即不可以调节投影扩散的大小。
text-shadow属性（文本阴影）应用实例
Drop-shadow 滤镜
Drop-shadow 可以接受的<shadow>参数介绍
drop-shadow滤镜可以接受 (shadow)属性除了"inset"关键字的其他值。
- <offset-x> <offset-y>(必须) 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).
- <blur-radius> (可选) 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
- <spread-radius> (可选) 这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
- 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
- <color> (可选) 查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
PS： 由于篇幅和时间有限，本例涉及到的有趣的CSS效果代码，我将在后续几日的 CSS技巧 文章中发布出来。当然，大家需要哪个代码，也可以在评论区留言给我。我会优先发出来的。感谢大家持续关注我！谢谢！
