页面布局中，无论是正常的文档流，还是flex布局，都会让页面铺满盒子。而box-shadow再页面设计中是不可缺少的效果，在单独盒子中的元素，box-shadow的阴影会投影到父级上。但是当阴影盒子是紧贴着，那阴影就会变得不可见。

办法1
在需要的box-shadow的元素设置position: relative
在正常文档流中，紧贴着，意味着元素涂在父级上的阴影被旁边元素覆盖再次涂写，所以设置position: relative就让元素脱离文档流，浏览器单独处理，就出现了z轴上的堆叠，也就不存在被紧贴着，阴影就直接投影在正常文档流之上。
办法2
在父级上设置flex，然后在需要阴影的元素设置z-index大于等于0
flex会让直接子元素变为一种flex-item元素，这个时候就不能称为文档流了，flex-item就有了z轴的概念，所以设置z-index就能调整阴影出现的堆叠层次。

出处：https://juejin.cn/post/6955678201142050853

// box-shadow实现四周阴影
box-shadow:0px 0px 20px #333333;

当box-shadow给出两个、三个或四个值时。

• 如果只给出两个值，那么这两个值将会被当作 offset-x左偏移量offset-y 右偏移量来解释。
• 如果给出了第三个值，那么第三个值将会被当作blur-radius模糊半径解释。
• 如果给出了第四个值，那么第四个值将会被当作spread-radius扩散半径来解释。
• 可选，inset关键字，边框外还是边框内。
• 可选，color颜色值。
  
  精选的几种box-shadow阴影效果:
  https://getcssscan.com/css-box-shadow-examples?ref=producthunt