html - 两个 HTML 元素的共享 CSS 框阴影

Question

我有一个 HTML 元素对列表，每一对都应该有一个统一的框阴影。通常，您可以通过将 box-shadow 样式附加到 list-item 类来完成此操作，一切都会正常进行。

但是，在我的例子中，HTML 是自动生成的，这意味着

1. 我无法添加任何可用作包装器/容器的新 HTML 元素
2. list-item 类默认有填充，它必须有那个填充

我已经尝试为 upper 和 lower CSS 类添加不同的 box-shadow 值，但我似乎无法获得看起来阴影均匀地围绕 list-item 并且在 upper 和 lower 之间没有阴影的结果降低。

这是 HTML:

<div id="list">
  <div class="list-item">
    <div class="upper"></div>
    <div class="lower"></div>
  </div>
  <div class="list-item">
    <div class="upper"></div>
    <div class="lower"></div>
  </div>
</div>

那么，如何在不触及列表项类的 padding 属性且不添加或删除任何 HTML 元素的情况下实现看起来均匀围绕列表项的框阴影？

编辑 - 这是所有自动生成的 CSS 和我的盒子阴影尝试的 fiddle :https://jsfiddle.net/1snLfok3/1/

Answer 1

你应该提供一些 CSS 来澄清这个问题，但这是我的猜测和一个可能的解决方案:伪元素之后

:root {
    --padding-size: 10px;
    --double-padding-size: 20px;
}

#list {
    display: flex;
    flex-direction: row;
}

.list-item {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: var(--padding-size);
}

.list-item:after {
    position: absolute;
    top: var(--padding-size);
    left: var(--padding-size);
    width: calc(100% - var(--double-padding-size));
    height: calc(100% - var(--double-padding-size));
    box-shadow: 3px 3px 3px #000;
    content: "";
}

.upper {
    width: 100%;
    height: 50%;
    background: red;
}

.lower {
    width: 100%;
    height: 50%;
    background: darkred;
}