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

【问题标题】：border-radius + background-color == cropped border边框半径 + 背景颜色 == 裁剪边框
【发布时间】：2011-09-12 19:32:30
【问题描述】：

考虑应用了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> 作为具有交替行颜色的内部元素。我使用<div> 作为外部元素，因为border-radius 似乎不适用于<table> 元素。 Here's a jsfiddle 这个问题的一个示例。

有人对解决方案有建议吗？

【问题讨论】：

标签： html border background-color css

【解决方案1】：

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

【讨论】：

出于设计原因，我无法添加填充。正如我所提到的，我的真实应用程序中的背景颜色来自 alternating 行颜色，这不可能在外部元素上定义。

【解决方案2】：

给 div 加一点填充是否可以接受？这样背景颜色就不会冲突了。

【讨论】：

不，背景颜色与边框齐平对我来说很重要。（即，我不想要this）

【解决方案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。

【讨论】：

这很好。我更喜欢在 IE8 中工作的版本，但如果它是可以做到的最好的，我会选择它。

【解决方案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;
}

【讨论】：

+1 用于探索其他选项。但由于它使用last-child，它在 IE8 中也不起作用，所以我认为我最好使用 melhosseiny 的解决方案。（它更短）
我明白了，您总是可以为包含边框半径样式的第一行和最后一行创建一个唯一的类。

【解决方案5】：

您可以通过将overflow: hidden; 应用于带有边框的元素来解决此问题。我认为这是一种更清洁的方式。

【讨论】：

【解决方案6】：

在外部div 中尝试overflow:hidden：

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

【讨论】：

这是更好的答案。
是的，它对我有用，但 overflow:hidden 在这里有什么作用？只是一个普通的黑客？还是有正当理由？非常感谢
它将溢出的背景隐藏在其父级之外，干净简单的解决方案。

【解决方案7】：

您也可以为子元素添加边框半径。

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

【讨论】：