html - 尽管上部 div 有其他边框，但下部 div 边框可见

Question

我在页面上有几个 div 元素，每个元素都有自己的边框。 问题是尽管其他元素(“#b”、“c#”)在它上面，但下部 div 边框(“#a”)是可见的。

请参阅以下 JS fiddle 示例和代码:http://jsfiddle.net/4jntf/

HTML:

<div id="container">
    <div id="a"></div>
    <div id="b" class="quarter"></div>
    <div id="c" class="quarter"></div>
</div>

CSS:

#container {
    position: absolute;
}

#a {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    position: absolute;
    width: 104px;
    border-color: #ff0000;
}

#b {
    border-top-left-radius: 55px;
    border-width: 4px 2px 4px 4px;
    float: left;
}

#c {
    border-width: 4px 4px 4px 2px;
    border-top-right-radius: 55px;

    float: right;
}
.quarter {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    height: 50px;
    width: 50px;
}

我想要的效果是一直看到中间的线，点击按钮可以看到想要的效果。

我能够获得所需效果的唯一方法是将 div“#a”的 CSS z-index 设置为 -1，但这会导致页面中的所有其他元素位于其顶部并且几乎不可见。

Answer 1

试试这个:

#a {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    width: 104px;
    border-color: #ff0000;
    float: left;
    margin-right: -112px;
}

工作样本:http://jsfiddle.net/H2jey/