html – 删除部分边框

我有一个小部件,不能包装在另一个div.

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

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

display: block;
    background-color: grey;
    color: white;
}
.body {
    width: 100%;
    height: calc(100% - 24px);
}

http://jsfiddle.net/botwfngv/

最佳答案

.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/