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

考虑应用具有border-radiusborderbackground-color CSS属性的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议?

7 Solutions collect form web for “边框半径+背景颜色==裁剪边框”

尝试overflow:hidden在外部div

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

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

看更新小提琴 。

你可以通过应用overflow: hidden;来解决这个问题overflow: hidden; 到带有边框的元素。 我觉得更清洁的方式。

桌子是否必须使用? 以下是使用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; } 

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

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

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

 <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE; border-radius:10px;"> Blah </div> </div> 
  • 如何做一个锚标签什么都没有提到?
  • 多个表单或多个页面提交?
  • 为什么保证金不会被父元素包含?
  • 用div来填充剩余的宽度
  • 如何使用CSS在HTML文档中插入换行符
  • 我可以使用jQuery打开一个下拉列表吗?
  • 当iPhone的方向从纵向变为横向时,保留HTML字体大小
  • 更正已禁用属性的值
  • 隐藏在AngularJs中的可见性?
  • 一个命令行的HTML漂亮的打印机:使凌乱的HTML可读
  • 调整iframe的宽度以适合其中的内容