我需要让我的 box-shadow 看起来像一个边框:如果我有一个带有 inset boxshadow 的父级并且我在其中放置了一个子 div,那么 box shadow 应该覆盖子 div,就像这里显示的带边框:
jsFiddle:http://jsfiddle.net/7rRsw/2/
这个问题是否有类似 z 索引或 css hack 的东西?
Thanks
编辑:我需要使用框阴影插入+无边框或框扣押。 我正在寻找技巧,以便仅使用框阴影来实现这一点。一个可能的 hack 是在子 div 上左右添加框阴影。
最佳答案
如果你想要一个不需要任何额外标记的解决方案,你可以使用“:before”伪类选择器:http://jsfiddle.net/7rRsw/8/
HTML
<div class="a"><div class="b">No extra markup needed</div></div>
CSS
.a {
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position: relative;
}
.a:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
关于javascript - 子元素上的盒子阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21209008/