删除部分边框

Question

我有一个小部件不能包装在另一个div中。

我的问题是如何从标题/标题栏中删除边框，但仍然将其保留在DIV的其余部分？以下示例。

仅向.body添加边框是不可行的，因为如果最终用户在窗口小部件的底部/顶部添加填充，则会破坏。

<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