是否可以将边框嵌入元素中，留下边距？

Question

我想让我的一些div具有顶部边框，但我希望将此边框稍微嵌入到元素中，并保留顶部的几个像素，并在其中显示div内容。

有没有办法做到这一点？我不是在寻找一个js或jQuery解决方案。

在下面的图片中，我希望棕色部分是一个div，带有一个4像素的橙色边框，插图是两个边框，一个橙色和一个棕色。它只需要在元素的顶部。

Answer 1

不完全边界，但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; 
} 

jsfiddle

Answer 2

你问什么不能用，因为box model standard的单个元素来完成，但它是微不足道的有两个因素有关。

<div class="outer"> 
    <div class="inner"> 
     What can I design fo 
    </div> 
</div> 

只要给之上.outer填充和.inner可以处理边界。

http://jsfiddle.net/ExplosionPIlls/NGbeB/

Answer 3

如果边界是为了全力以赴在元素周围的方式，而不只是一个特定的一面，你可以使用大纲为此目的：

http://tinker.io/95978

h1 { 
    background: #CCC; 
    outline: 2px solid; 
    outline-offset: -8px; 
    padding: 10px; 
} 

<h1>I like borders</h1> 

然而，轮廓偏移属性没有在IE浏览器的任何版本的支持。

您也可以使用伪元素来保存边框，这将允许您仅在特定的边上指定边框。

http://tinker.io/95978/1

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 +工作和几乎任何其他浏览器。