边框半径 + 背景颜色 == 裁剪边框

Question

考虑一个应用了border-radius 、 border和background-color CSS属性的div ：

 <div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div>

现在考虑一个类似的布局，但在内部 div 中指定了background-color ：

 <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"> Blah </div> </div>

我对内部<div>的background-color遮挡了外部<div>的边框这一事实感到沮丧。

这是问题的简化示例。 实际上，我使用<table>作为交替行 colors 的内部元素。 我使用<div>作为外部元素，因为border-radius似乎不适用于<table>元素。 这是此问题示例的 jsfiddle 。

有没有人有解决方案的建议？

Answer 1

尝试overflow:hidden在外部div中：

 <div style="border-radius:10px; border: 1px black solid; overflow: hidden"> <div style="background-color:#EEEEEE;"> Blah </div> </div>

Answer 2

添加这些 CSS 规则：

tr:first-of-type td:first-child {
    border-top-left-radius: 5px;    
}

tr:first-of-type td:last-child {
    border-top-right-radius: 5px;    
}

tr:last-of-type td:first-child {
    border-bottom-left-radius: 5px;    
}

tr:last-of-type td:last-child {
    border-bottom-right-radius: 5px;    
}

请参阅更新的小提琴。

Answer 3

您可以通过应用overflow: hidden; 到有边框的元素。 我认为一种更清洁的方式。

Answer 4

一定要用桌子吗？ 这是使用 DIV 的示例： http://jsfiddle.net/6KwGy/1/

HTML：

<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

CSS：

.container {
    width: 100%;
}

.leftHalf {
    float:left;
    width:50%;
}

.rightHalf {
    float:left;
    width:50%;
}
.row {
    float: left;
    width: 100%;
}

#container .row:nth-child(odd) {
    background-color: #EEEEEE;
}
#container .row:first-child {
    border-top: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}
#container .row:last-child {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
}
#container .row {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

Answer 5

您也可以将border-radius 添加到子元素。

 <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE; border-radius:10px;"> Blah </div> </div>

Answer 6

添加一些填充，或者在外部元素上做背景色

Answer 7

给 div 一点填充可以接受吗？ 这样背景 colors 就不会发生冲突。