42

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

这是一个例子:

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

http://jsfiddle.net/MAckM/

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

我怎样才能让盒子阴影在顶部a

4

2 回答 2

44
于 2012-11-02T03:27:26.260 回答
5

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

不幸的是,没有办法避免额外的包装div(由于box-shadow分层)。

.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>

于 2019-02-07T15:11:21.403 回答