css - 是否可以在元素中插入边框，留下边距？

Question

我希望我的一些 div 有一个顶部边框，但我希望这个边框稍微嵌入到元素中，让顶部的几个像素保持原样，div 内容在那里可见。

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

在下面的图片中，我希望棕色部分是一个 div，有一种 4px 橙色边框，插入或两个边框，一个橙色和一个棕色。它必须位于元素的顶部。

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

由于盒子模型标准，您所要求的不能用单个元素来完成，但是用两个元素来做是微不足道的。

<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 都不支持 outline-offset 属性。

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

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