3

So I have a rounded corner'd div created via the CSS3 "border-radius" rule. It has a child element at the top that has a background color (in this case, the same color as the border color). It's almost perfectly fine, except for the fact that they don't quite touch each other in the corner. It's visible at normal zoom, but much easier to see zoomed in:

not quite touching

(This screenshot was taken in the latest version of Google Chrome, but I observe the same problem in Firefox)

As a complicating factor, sometimes the .title_bar element is a table-row. How do I make that tiny gap go away?

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

4

4 回答 4

3

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

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

工作版本

于 2013-06-04T09:36:15.117 回答
1

只需添加/移动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;
}
于 2013-06-04T09:37:37.737 回答
1

（注意：问题的作者需要在父级和子级 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;
}
于 2013-06-04T09:57:42.217 回答
0

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

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

也是孩子和父母的半径

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

在此处输入图像描述

于 2018-07-14T16:53:16.143 回答