删除部分边框

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。