边框半径无法完全覆盖div内容

Question

我有一个使用CSS3的“border-radius”规则创建的圆角div。它顶部有一个子元素，具有背景颜色（在本例中与边框颜色相同）。除了它们在角落里没有完全接触之外，几乎完美无缺。在正常缩放下可见，但放大后更容易看到：

（此截图是在最新版的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

- Mala

---

您可以在位于下方的父级 div 上使用稍大的 border-radius。 - kleinfreund

能否展示一下代码？如果问题清晰明了，我会给你点赞的。 - Dave

@Mala：我一开始就搞错了——但我的意思是要在两个元素上使用两个border-radius值。您仍然可以在td元素上使用border-radius，并仅将其应用于特定的元素。 - kleinfreund

@kleinfreund 非常好的想法... 我可以使用 first-child 和 last-child 来做到这一点，对吗？ - Mala

另一个选项是将伪元素放置在比实际大小大或小1像素的位置。无论如何，这是个好问题！ - G-Cyrillus

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

- Dave

---

抱歉，但这样做就没有边框了。 - Mala

但它仍然会有圆角。 - Wez

@Mala 是的，但是你在黑色背景上有一个黑色边框-你看不到边框！ - Dave

它的作用在于填补了空白，但是它的问题在于“round_box”不再是一个圆形盒子，而是一个带有圆角条的透明盒子（除非我误解了什么？） - Mala

@Mala，你点击了我给的链接吗？ - Dave

@DaveRook：是的...但只有在title_bar部分。盒子的其余部分是白色的（或者是它后面的任何颜色）- 是的，我点击了它。抱歉我的问题可能不太清楚，我留下了一些细节让从代码中推断出来：title_bar是一个放置在其他内容上方的东西，而其他内容不在灰色背景中。 - Mala

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

- Luca

---

谢谢。这确实消除了间隙，但我需要相当令人不愉快地更改标记以便使用它，因为我需要将 title_bar 之外的所有内容都包装在一个 div 中，这样我才能使其变白色。尽管如此，这个答案还是值得点赞的，因为它可能会帮助其他人 :) - Mala

实际上，使用 .round_box > * {color: #fff} 我可以完美地解决这个问题。谢谢！ - Mala

无法再编辑评论了，但是我所说的“color”实际上指的是“background”。 - Mala

Answer 3

（注意：问题的作者需要在父元素和子元素div上拥有圆角 - 有时子元素是一个表格行。）

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

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

- kleinfreund

---

这个方法非常有效，如果不是因为我在问题中没有指定的另一个因素，它将是我的首选解决方案。谢谢！ - Mala

Answer 4

不使用overflow:hide，而是使用LEFT和Top，同时高度等于父元素

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

同时也要考虑子元素和父元素的半径

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

输入图像描述

- Mohammad Reza Mrg