使用box-shadow实现门形阴影：添加.shadow-longer后左右阴影变暗问题

问题根源是CSS属性的覆盖：当给div添加.shadow-longer类时，类内的box-shadow会直接替换原div上的左右阴影样式，导致左右阴影被覆盖消失，只剩底部的多层阴影，视觉上就显得左右阴影变暗了。

解决方案1：合并所有阴影到类中 #

直接把左右阴影和底部阴影整合到.shadow-longer的box-shadow属性里，用逗号分隔多个阴影效果：

div {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  box-shadow:
    -60px 0px 100px -90px #000000,
    60px 0px 100px -90px #000000;
}

.shadow-longer {
  box-shadow:
    /* 保留原左右墙壁阴影 */
    -60px 0px 100px -90px #000000,
    60px 0px 100px -90px #000000,
    /* 添加底部地面阴影 */
    0 2px 1px rgba(0, 0, 0, 0.09),
    0 4px 2px rgba(0, 0, 0, 0.09),
    0 8px 4px rgba(0, 0, 0, 0.09),
    0 16px 8px rgba(0, 0, 0, 0.09),
    0 32px 16px rgba(0, 0, 0, 0.09);
}

解决方案2：用inherit继承原阴影 #

如果不想重复编写左右阴影代码，可以通过inherit继承原div的阴影样式，再追加底部阴影：

div {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  box-shadow:
    -60px 0px 100px -90px #000000,
    60px 0px 100px -90px #000000;
}

.shadow-longer {
  box-shadow: inherit,
    0 2px 1px rgba(0, 0, 0, 0.09),
    0 4px 2px rgba(0, 0, 0, 0.09),
    0 8px 4px rgba(0, 0, 0, 0.09),
    0 16px 8px rgba(0, 0, 0, 0.09),
    0 32px 16px rgba(0, 0, 0, 0.09);
}

最后修改HTML #

给div添加类，让底部阴影生效：

<div class="shadow-longer"></div>

修改完成后，门元素就能同时显示左右两侧的墙壁阴影和底部的地面阴影，不会出现阴影变暗的问题。

内容的提问来源于stack exchange，提问作者Meu Akan