Question

所以我有一个通过CSS3“border-radius”规则创建的圆角div。它在顶部有一个具有背景颜色的子元素（在这种情况下，颜色与边框颜色相同）。它几乎完全没问题，除了它们在角落里没有完全相互接触的事实。它在正常变焦时可见，但更容易看到放大：

not quite touching

（此屏幕截图是在最新版本的Google Chrome中拍摄的，但我在Firefox中观察到同样的问题）

作为一个复杂的因素，有时.title_bar元素是一个表格行。如何让这个微小的差距消失？

HTML：

<div class="round_box">
    <div class="title_bar">Hello</div>
</div>

CSS：

.round_box {
    border: 2px solid #333;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.round_box .title_bar {
    background: #333;
    color: #fff;
    font-weight: bold;
    padding: 7px;
}

JsFiddle here

Answer 1

您可以通过删除边框来解决此问题，因为黑色背景上有黑色边框，您无法看到其中一个开始而另一个结束！

.round_box {
   /*  border: 2px solid #333;  REMOVE THIS */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.round_box .title_bar {
    background: #333;
    color: #fff;
    font-weight: bold;
    padding: 7px;
}

Working version

Answer 2

只需将background-color添加/移动到.round_box

即可

http://codepen.io/seraphzz/pen/fHECx

.round_box {
    border: 2px solid #333;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #333;
}

Answer 3

（注意：问题的作者需要在父和子div上使用圆角 - 加上有时孩子是表格行。）

（可能）解决方案：在父级和子级上使用border-radius。如果孩子是tr - 将其应用于border-top-left-radius和border-bottom-right-radius的第一个和最后一个td元素。

<强> HTML：

<div class="round_box">
    <div class="title_bar">Hello</div>
</div>

<强> CSS：

.round_box {
    border: 2px solid #333;
    border-radius: 10px;
}

.round_box .title_bar {
    background: #333;
    border-radius: 6px;
    color: #fff;
}

.round_box td:first-child {
    border-top-left-radius: 6px;
}

.round_box td:last-child {
    border-bottom-right-radius: 6px;
}

Answer 4

无溢出：隐藏使用LEFT和Top也等于父级的高度

  min-height: 52px;
  bottom: 1px;
  left: 0.5px;

父子双方的半径

  border-radius: 26px 26px 26px 26px;
  border-radius: 0px 26px 26px 0px;

enter image description here

border-radius并不完全触及div内容

4 个答案: