是否可以將邊框嵌入元素中，留下邊距？

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 +工作和幾乎任何其他瀏覽器。