box-shadow理解与记忆

起念

用的时候总对参数的顺序记忆不清，以及具体要设置多少，主要是blur和spread这两个值的影响没有认真搞清楚

定义和用法

box-shadow: h-shadow v-shadow blur spread color inset;

理解

• 如同box-shadow这名字，可以理解为阴影也是个box，只是被放在了下面
• h-shadow v-shadow是这个阴影盒的左上角坐标位置
• blur官方称为模糊距离，它的实际操作是：模糊是个过渡的状态，那么相对于阴影盒的边缘哪里开始减弱呢，根据观察blur的值是边缘内外各占一半，见图一
• spread，是在原阴影盒的边缘向外增加对应的厚度，见图二

蹩脚总结

参数：xybs，渲染的过程可以这么理解：先单向厚度加spread后计算blur外加半

图一：分别为box-shadow:50px 50px 50px black/50px 50px black;

图二：