由于某些元素位于幻灯片内,我使用带有负偏移量的轮廓而不是边框。
然而,子元素覆盖了轮廓,但我想要它们上面的边框。我用它来构建内容。
http://jsfiddle.net/z22kw2zq/1/
.parent {
position:relative; outline: green 3px solid;
outline-offset:0px;
background-color:pink;
pading:5px;
overflow:hidden;
}
.child {position:relative; top:26px; background-color:yellow;
display:inline;
}
你可以使用:after
用于轮廓和添加的伪元素position: absolute
.
.parent {
position: relative;
background-color: pink;
overflow: hidden;
}
.parent:after {
width: 100%;
height: 100%;
content: '';
outline: green 3px solid;
outline-offset: -3px;
position: absolute;
top: 0;
left: 0;
}
.child {
position: relative;
top: 23px;
background-color: yellow;
display: inline;
}
p {
margin: 0;
}
<div class="parent">
<div class="child">lorem ipsum doler sit amet</div>
<p>text here</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)