去掉边框的一部分

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/

- Dennis

---

http://jsfiddle.net/botwfngv/1/ - Cheery

不幸的是，overflow: hidden; 应该被移除，否则子元素无法覆盖父元素的边框。 - Cheery

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/

- Cheery

---

只需将“margin”和“padding”更改为“-3px”和“3px”，以适应“border”。+1 - emerson.marini

@MelanciaUK 是的，高分辨率屏幕，看不到小细节)) 谢谢 - Cheery

如果您能找出为什么引导程序会中断此操作，那就更好了... =\ http://jsfiddle.net/botwfngv/3/ - Dennis

@Mr.White，移除.headerзљ„width: 100%;гЂ‚ - Cheery

天才... 同时设置 box-sizing:initial 也可以解决问题。 - Dennis

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演示。

- dashtinejad

---

@Mr.White 哎呀，我的错。我已经更新了我的答案...（请注意我添加到“widget”的“padding”）。 - dashtinejad