尝试使用CSS形成带边框的文件夹选项卡样式div

Question

我正在尝试在css中创建一个带边框的文件夹样式的div，但似乎无法摆脱将两个部分分开的边框。

到目前为止我已经走了多远：http://jsfiddle.net/Argoron/GUtDy/12/

我不知道如何避免将标题div与内容div分开的边框。

提前感谢您的帮助！

Answer 1

正确的方法是将一个1px（或npx，其中n是边框宽度）放在另一个上，然后将选项卡放在带有z-index的选项卡区域上。

Code

我没有使用你的代码，而是用我的代码构建。

HTML

<div id="wrapper">

    <h1>HEADER</h1>

    <div id="content-container">
        Content
    </div>

</div>

CSS

/* Tabbed view without separation border */
* {
    padding: 0;
    margin:  0;
}

#wrapper {
    width:   600px;
    padding: 10px;
    margin:  10px;
}

body {
    font-family: arial, serif;
}

h1, #content-container {
    border: 1px solid rgb(0, 0, 0);

}

h1 {
    /* This is the important part! */
    border-radius:       6px 6px 0 0;
    display:             inline-block;
    position:            relative;
    top:                 1px; /* Offset one pixel to the bottom */
    border-bottom-color: white; /* white border overrides black. white should be the same as the background color */
}

#content-container {
    border-radius: 0 6px 6px 6px;
}