在内容下方插入框阴影 [英] Inset box-shadow beneath content
本文介绍了在内容下方插入框阴影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不明白为什么,但是内容下方有插入框阴影.
I don't understand why, but an inset box shadow is beneath my content.
这是一个例子:
div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}
<div>
a
</div>
您会看到a
位于框阴影的顶部.
You see the a
is on top of the box shadow.
如何使框阴影位于a
顶部?
How can I get the box shadow to be on top of the a
?
推荐答案
您需要在div内制作一个新元素,其绝对位置和高度和宽度为100%,然后为该元素添加框阴影.
You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.
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>
或者,您可以使用伪元素:
Alternatively, you can use a pseudo element:
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>
这篇关于在内容下方插入框阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文