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

Posted 2023-02-21

【中文标题】边框半径 + 背景颜色 == 裁剪边框

【英文标题】：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 这个问题的一个示例。

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

【参考方案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>