box-shadow 属性无效

1.原因分析

• 在单独盒子中的元素, box-shadow 的阴影会投影到父级上, 但是如果阴影盒子是紧贴的, 那么阴影就不可见了

2.解决方案:

1. 在需要的 box-shadow 的元素设置 position: relative:

   使用 position: relative: 在正常文档流中, 紧贴着意味着元素涂在父级上的阴影被旁边元素覆盖再次涂写, 所以设置 position: relative 就让元素脱离文档流, 浏览器单独处理, 就出现了 z 轴上的堆叠, 也就不存在被紧贴着, 阴影就直接投影在正常文档流之上.

2. 在父级上设置 flex, 然后在需要阴影的元素设置 z-index 大于等于0

   flex 会让直接子元素变为一种 flex-item 元素, 这个时候就不能称为文档流了, flex-item 就有了 z 轴的概念, 所以设置 z-index 就能调整阴影出现的堆叠层次.