盒子阴影效果与环绕阴影

box-shadow

在前端样式里面，最常见的一中效果之一就是阴影，好的阴影可以瞬间给人一种高端的用户体验，今天简单总结下这个样式的语法与使用方法。

语法

box-shadow的语法其实是比较简单好记的，我们按照最全面的写法来看

1. x轴偏移量：为正数时阴影向盒子右边延申
2. y轴偏移量 ：为正数时阴影向盒子下方延申（这里与我们一直熟悉的坐标系是相反的）
3. 阴影模糊半径：值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为 0，此时阴影边缘锐利。
4. 阴影扩散半径：取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大
5. 阴影颜色
6. 是否内嵌：使用inset会定义内嵌的阴影，所以效果都会向盒子内部延申，内嵌式x和y轴偏移量则取反

值得一提的是box-shadow的阴影设置是可以不止一层的。例如我们想要一个两层的盒子阴影：
box-shadow: 2px 2px #000, 4px 4px #f0; 这样我们就得到了一个黑色与红色重叠的阴影效果。

简单说完box-shadow，我们来想想这样的场景：假设我有一种png图片，图片结果类似于圆形，如下：
当我尝试为这样图片添加阴影的时候，他就会出现如下效果：
这绝对不是我们想要的，我们肯定更趋向于只对圆形部分添加阴影。这个时候box-shadow显然已经不能满足我们的需求了。我们必须借助filter这个样式来实现。

filter

filter的参数都为执行函数

1. blur()：将高斯模糊应用于输入图像。
2. brightness()：将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。（简单来说就是设置100%则图片颜色不变，越低则越暗，越高则越亮，这个想过其实很多时候可以用做选中的高亮展示）
3. contrast()：调整输入图像的对比度。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。
4. drop-shadow()：使用 <shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 ，但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。
5. grayscale()：将图像转换为灰度图。值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。
6. hue-rotate() ：应用色相旋转。 值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。
7. invert()：反转输入图像。值为 100% 则图像完全反转，值为 0% 则图像无变化。值在 0% 和 100% 之间，则是该效果的线性乘数。
8. opacity()：应用透明度。值为 0% 则使图像完全透明，值为 100% 则图像无变化。
9. saturate()：改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。
   10.sepia()：将图像转换为深褐色。值为 100% 则完全是深褐色的，值为 0% 图像无变化。

这个时候我们使用filter的 drop-shadow()

filter: drop-shadow(0 0 10px #000);

完成！

附上自己写的一个盒子影音的精美样例，并支持在线修改!
http://ffanddd.gitee.io/box-shadow-show
git地址：https://gitee.com/ffanddd/box-shadow-show.git