border-radius + background-color ==裁剪边框

Question

考虑div使用了border-radius,border和background-colorCSS属性:

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

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

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

我是由事实沮丧background-color的的内部 <div>是模糊的边界外 <div>.

这是问题的简化示例.实际上,我使用a <table>作为交替行颜色的内部元素.我使用a <div>作为外部元素,因为border-radius它似乎不适用于<table>元素.这是这个问题的一个例子.

有没有人有解决方案的建议？

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;到带有边框的元素来解决此问题。我认为一种更清洁的方式。