我不明白为什么,但插入的盒子阴影在我的内容之下。
以下是一个例子:
div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}
<div>
a
</div>
您会看到a
位于框阴影的顶部。
如何让框阴影位于a
?
答案 0 :(得分:32)
你需要在div中创建一个新元素,绝对定位,高度和宽度为100%,然后给该元素赋予框阴影。
HTML:
<div>
<div></div>
a
</div>
CSS:
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%;
}
这是JSFiddle。
修改强>
或者,您可以使用伪元素:
HTML:
<div>
a
</div>
CSS:
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%;
}
答案 1 :(得分:0)
此答案通过一个最小的示例提供了最直接的解决方案,并解决了滚动问题。
不幸的是,由于box-shadow
layering,无法避免额外包装div
。
.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>