css - 试图用 CSS 形成一个有边界的、文件夹标签样式的 div

Question

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

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

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

在此先感谢您的帮助 ！

Answer 1

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

代码

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

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;
}