刪除部分邊框

Question

我有一個小部件，其中不能將包裹在另一個div中。

我的問題是如何從標題/標題欄中刪除邊框，但仍然保留在DIV的其餘部分？下面的例子。

僅向.body添加邊框是不可行的，因爲如果最終用戶向小部件div的底部/頂部添加了填充部分，則會導致事件中斷。

<div class="widget"> 
    <div class="header">Header Title</div> 
    <div class="body">My Content</div> 
</div> 


.widget { 
    height: 100px; 
    width: 130px; 
    border: 3px solid blue; 
    position: absolute; 
    overflow: hidden; 
} 
.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
} 
.body { 
    width: 100%; 
    height: calc(100% - 24px); 
} 

http://jsfiddle.net/botwfngv/

Answer 1

.widget { 
    height: 100px; 
    width: 130px; 
    border: 3px solid blue; 
    position: absolute; 
} 
.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
    margin: -3px; 
    padding: 3px; 
} 
.body { 
    width: 100%; 
    height: calc(100% - 24px); 
} 

http://jsfiddle.net/botwfngv/2/

Answer 2

可以實現通過CSS2的結果而已，只是添加邊框的body，而不是整個widget：

.widget { 
    width: 130px; 
    position: absolute; 
    padding: 25px; 
} 

.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
    padding: 3px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

.body { 
    width: 100%; 
    height: 100px; 
    border: 3px solid blue; 
    border-top-width: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 30px; 
} 

JSFiddle Demo。