是否可以将边框嵌入元素中,留下边距?
问题描述:
我想让我的一些div具有顶部边框,但我希望将此边框稍微嵌入到元素中,并保留顶部的几个像素,并在其中显示div内容。是否可以将边框嵌入元素中,留下边距?
有没有办法做到这一点?我不是在寻找一个js或jQuery解决方案。
在下面的图片中,我希望棕色部分是一个div,带有一个4像素的橙色边框,插图是两个边框,一个橙色和一个棕色。它只需要在元素的顶部。
答
不完全边界,但CSS3 box-shadow可以在该框内画成与原来的颜色*:
#my_div {
width: 200px;
height: 100px;
background: brown;
padding: 10px;
color: orange;
border-top: 10px brown solid;
box-shadow: inset 0 5px orange;
}
答
你问什么不能用,因为box model standard的单个元素来完成,但它是微不足道的有两个因素有关。
<div class="outer">
<div class="inner">
What can I design fo
</div>
</div>
只要给之上.outer
填充和.inner
可以处理边界。
答
如果边界是为了全力以赴在元素周围的方式,而不只是一个特定的一面,你可以使用大纲为此目的:
h1 {
background: #CCC;
outline: 2px solid;
outline-offset: -8px;
padding: 10px;
}
<h1>I like borders</h1>
然而,轮廓偏移属性没有在IE浏览器的任何版本的支持。
您也可以使用伪元素来保存边框,这将允许您仅在特定的边上指定边框。
h1 {
position: relative;
background: #CCC;
padding: 10px;
}
h1:before {
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 2px solid;
content: ' ';
display: block;
}
应该在IE8 +工作和几乎任何其他浏览器。
你有你想要的图吗? – Kyle 2013-04-11 13:43:40
http://css-tricks.com/snippets/css/multiple-borders/ – 2013-04-11 13:52:16