内容下方的插入框阴影答案

【问题标题】：Inset box-shadow beneath content内容下方的插入框阴影
【发布时间】：2020-04-20 08:33:04
【问题描述】：

我不明白为什么，但我的内容下方有一个嵌入框阴影。

这是一个例子：

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}

<div>
   a
</div>

http://jsfiddle.net/MAckM/

您会看到a 位于盒子阴影的顶部。

如何让盒子阴影位于a 的顶部？

【问题讨论】：

我已经使用了这个解决方案，效果很好，但另外重要的是这个 div:before 的 z-index。当您无法涵盖全部内容时，请不要忘记使用它。

标签： z-index css

【解决方案1】：

你需要在 div 中创建一个新元素，绝对定位和高度和宽度为 100%，然后给该元素添加盒子阴影。

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div>
    <div></div>
    a
</div>

编辑：

或者，您可以使用伪元素：

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div>
    a
</div>

【讨论】：

在现代浏览器（包括 IE9+）中，可以使用生成的内容（:before、:after）代替真实元素。（IE8 也支持生成内容，但是有一个 bug 会阻止生成的内容高于真实内容，当然也不支持 CSS 框阴影本身。）
@MaratTanalin 绝对正确。它也是一个更漂亮的解决方案。更新了答案。
任何一个答案对我来说都很好，但我有一个问题。当我在中心div 内有另一个div 时，阴影元素或伪类位于内部div 之上。如果我将 z-index 添加到内部 div，那么它会位于 box-shadow 的顶部。尝试点击此演示中的链接：jsfiddle.net/MAckM/5
显然，对于具有可滚动内容的容器，最好使用空的div，因为:before会使阴影随着内容滚动。
对我来说， div 解决方案也使阴影滚动。另外，我失去了我的父母填充来调整内容。

【解决方案2】：

这个答案通过一个最小的例子提供了最直接的解决方案，并解决了滚动问题。

不幸的是，没有办法避免额外的包装div（由于box-shadow layering）。

.container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 9px 3px yellow;
  pointer-events: none;
}

.items {
  height: 100px;
  overflow: scroll;
}

<div class="container">
  <div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
    <div class="item">Eleven</div>
    <div class="item">Twelve</div>
  </div>
</div>

【讨论】：

指针事件加 1：无；这正是我所需要的。