本文已参与「 新人创作礼 」活动，一起开启掘金创作之路
我每天分享的内容都是在项目中接触到的，并且也是我自己整理出来方便将来自己看的笔记之一。当然可能会有错误也欢迎大家探讨 & 指出。
css3引入了box-shadow ， 如果说他的作用最大的方便之处，就是他不影响网页结构的流式布局。这也是box-shadow 最为伟大的地方。
一般应用在项目重构的过程，如果影响网页的结构势必重构的成为会增加。
举例说明：例如pc浏览器展示着N多的图片，想加入一个新功能，鼠标移上去有1px的红色边框 。大部人想到的就是。
img:hover {
border:1px solid red;
}
这种做法就是整个盒子模式的结构会有改变。
关于盒子模型我这里会提一下，但不是今天讲的主要内容。
box-sizing: content-box（默认） || border-box;
1、content-box传统盒模型 ，也是浏览器默认的方式 （ content-box 是W3C的标准盒模型模型，范围包括 margin、border、padding、content ）
2、border-box盒模型 IE 盒子模型的 content 部分包含了border 和 padding，其内容真正的宽度是(width-padding-boder)；
不管你选用哪一种，都会给结构造成破坏。这个时候box-shadow的作用就应用而生。
他的牛逼不仅仅是不影响盒子模型，更是在边框样式可以玩出很多花样。
例如：很多比较可爱的Icon都是通过box-shadow来完成的。（ 左右箭头、黑洞阴影，具体的案例大家可以搜索 ）
案例：我的一个业务ToC的系统，左边Menu需要一个阴影渐进效果。而且其他功能都是做好的，不能影响网页结构。
shadow:0 0 1px rgba(88, 102, 126, 0.08), 1px 2px 2px rgba(88, 102, 126, 0.12);
右边&下边有个1px为基础的2px宽度的阴影 ，有两个透明程度不同的阴影色向外扩散。
具体参数的含义其实我还是拿官方的解释，大家也可以去W3C看。参考链接：点这里
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：水平阴影的偏移值，必需，可以为负值。
- v-shadow：纵向阴影的偏移值，必需，可以为负值。
- blur：阴影模糊值，可选，不能为负值。
- spread：阴影的扩展，可选，可以为负值。
- color：阴影的颜色，虽然是可选，但是在不同的浏览器里面解释不一样，有些是黑色，有些是透明，所以建议都要设置。具有透明度的阴影可以用rgba的值。
- inset：内阴影。可选，如果缺省，默认是外阴影（outset）。
至于DEMO就这样吧，我随便写了2个。
<div class="shadow shadow-demo1">
</div>
<div class="shadow shadow-demo2">
</div>
.shadow {
margin-top:30px;
width:60px;
height:60px;
}
.shadow-demo1 {
box-shadow: 4px 4px 2px 2px #171924;
}
.shadow-demo2 {
box-shadow: 0px 0px 1px 1px #171924 , 0px 0px 2px 2px blue,
0px 0px 3px 3px blueviolet,0px 0px 4px 4px red;
}
也可以参考这里：code.juejin.cn/pen/7086357…
PS： 整理文章其实还是蛮累的，如果有不清楚的地方，欢迎提问，都会答复，如需DEMO， 我会在下一篇文章整理出来。
