是否可以将边框插入元素中,留下边距？

Question

我希望我的一些div有一个顶部边框,但我希望这个边框稍微嵌入元素中,保留前几个像素,并在那里看到div内容.

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

在下面的图片中,我希望棕色部分是一个div,有一种4px橙色边框插入或两个边框,一个橙色和一个棕色.它需要在元素之上.

Answer 1

不完全是边框,但CSS3 框阴影可以在框内绘制,外面有原始颜色边框:

#my_div { 
    width: 200px;
    height: 100px;
    background: brown;
    padding: 10px;
    color: orange;
    border-top: 10px brown solid; 
    box-shadow: inset 0 5px  orange;
}

的jsfiddle