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