强制框阴影在内容的顶部 [英] Force Box-Shadow on top of Content
本文介绍了强制框阴影在内容的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不明白为什么,但是我的内容下面有一个插入框阴影。
这里有一个例子:
div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}
< div>
a
< / div>
您会看到 a
在盒子阴影之上。
如何获得盒子阴影在 / code>?
解决方案
您需要在div中创建一个新元素,
<$ c> $ c>< 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%;
}
编辑:
或者,您可以使用伪元素:
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%;
}
I don't understand why, but an inset box shadow is beneath my content.
Here's an example:
div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}
<div>
a
</div>
You see the a
is on top of the box shadow.
How can I get the box shadow to be on top of the a
?
解决方案
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.
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%;
}
Here is a JSFiddle.
Edit:
Alternatively, you can use a pseudo element:
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%;
}
这篇关于强制框阴影在内容的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文