镶边-半径 + 背景-颜色 = = 裁剪过的边框

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

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

enter image description here

现在考虑一个类似的布局，但使用在 inner-div 中指定的 background-color:

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

enter image description here

我感到沮丧的事实是，内心的 <div>的 background-color是模糊的边界的 外面的 <div>。

这是问题的一个简化例子。实际上，我使用 <table>作为具有交替行颜色的内部元素。我使用 <div>作为外部元素，因为 border-radius似乎不适用于 <table>元素。这个问题的样本的 这是小提琴。

有人提出解决方案吗？

112231 次浏览
小开

Add some padding, or do the background color on the outer element

小开

Would it be acceptable to give the div a little padding? That way the background colors wouldn't conflict.

小开

Add these CSS rules:

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

See updated fiddle.

小开

Does a table have to be used? Here's an example using DIV's: 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;
}
小开

You can fix this by applying overflow: hidden; to the element with the border. A much cleaner way I think.

小开
最佳答案

Try overflow:hidden in the outer div:

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

小开

You could add border-radius to the child element too.

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


提交答案