Question

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

但是，就我而言，HTML是自动生成的，这意味着

我无法添加任何可用作包装器/容器的新HTML元素
list-item类默认具有填充，并且必须具有该填充

我尝试过向上下CSS类添加不同的box-shadow值，但是我似乎无法实现看起来像阴影均匀分布在list-item上的效果，并且在上层和下层之间没有阴影更低。

这是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>

那么，如何在不触摸list-item类的padding属性并且不添加或删除任何HTML元素的情况下，实现一个看起来像在list-item周围均匀分布的框阴影？

编辑-这是所有自动生成的CSS和我的框影尝试的小提琴：https://jsfiddle.net/1snLfok3/1/

Answer 1

您应该提供一些CSS来澄清问题，但这是我的猜测，也可能是通过：after伪元素解决的方法

\1  Caption =

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

1 个答案: