前端开发 CSS3 阴影（css3新特性）

CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）
CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用：
1，盒子阴影
（1）盒子阴影的属性是 box-shadow
前两个值分别表示阴影水平方向和垂直方向的偏移量。
第三个值表示模糊距离。最后一个值是阴影颜色。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308214831104.png

（2）盒子阴影是可以随着盒子形状而自动变化的

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308214843724.png

（3）如果盒子下面有内容的话，可以使用 rgba() 函数，将阴影颜色设置为半透明的
（4）伸展范围设置
在模糊距离后面还可以添加一个值，表示伸展范围（spread）。用来增大模糊边界之前的实心颜色面积。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308214933931.png
（5）在颜色后面加上 inset 用来创建内部阴影

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020030821501962.png
2，文本阴影
文本阴影的属性是 text-shadow。
第一个是水平方向的值，第二个是垂直方向的值，第三个是模糊度，第四个是颜色。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308215031494.png