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

考虑应用具有border-radius ， border和background-color CSS属性的div ：

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

现在考虑一个类似的布局，但在inner-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>元素上似乎不起作用。 这是一个这个问题的例子jsfiddle 。

有没有人有一个解决scheme的build议？

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;来解决这个问题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

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

Answer 6

给div一个小填充是可以接受的吗？ 这样的背景颜色不会冲突。

Answer 7

您也可以将边界半径添加到子元素。

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