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

Question

考虑应用了

div

、

border-radius

和

border

CSS 属性的

background-color

：

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

令我沮丧的是，

inner

background-color 的

<div>

遮住了 outer

<div>

的边界。

这是问题的简化示例。实际上，我使用

<table>

作为具有交替行颜色的内部元素。我使用

<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

您可以通过将

overflow: hidden;

应用于带有边框的元素来解决此问题。我认为这是一种更干净的方式。

Answer 3

添加这些 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;    
}

查看更新的fiddle。

Answer 4

您也可以将

border-radius

添加到子元素。

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

Answer 5

必须使用桌子吗？这是使用 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 6

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

Answer 7

给 div 一点内边距可以接受吗？这样背景颜色就不会冲突。