嵌套 div 上边界半径的 CSS 错误外观答案

【问题标题】：CSS wrong appearance of border-radius on a nested div嵌套 div 上边界半径的 CSS 错误外观
【发布时间】：2016-06-29 07:24:58
【问题描述】：

我需要使用以下 HTML：

确保target div（粉红色）的边框与wrapper-target红色边框div相邻。
必须适用于任何边界半径值。

考虑到：

我正在使用box-sizing: border-box;，但也可以重置为默认值。
我无法更改target div 的border-radius 属性。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red;">
  <div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
  </div>
</div>

注意事项：

在这个具体的例子中我不需要画一个圆圈:)。

【问题讨论】：

您的 wrapper-target 的宽度和高度为 250px，但边框半径为 100px。要让它变成圆形，你必须使用 125px 边框半径 ;-) 或者只使用 border-radius: 50%; 这对于圆形元素要好得多，因为你可以更改宽度和高度，它仍然适合。
我不需要圈子
基本上你想摆脱订单和目标 div 之间的空白？
@Sowmya 正确！我提出并编辑了我的问题，我更改了边框的半径，所以没有混淆:)
@GibboK：如果目标上的border-radius 无法更改，那么我认为唯一的选择是使子级与父级具有相同的尺寸（使用calc），定位它然后剪裁@987654331 @ 在父母中。我已经在我的答案中添加了一个示例，也许它会对你有所帮助。

标签： html css

【解决方案1】：

问题的第 1 部分：（原始演示中的孩子变成了一个回合）

问题是因为box-sizing: border-box。设置此项后，框的定义高度、宽度 (250 x 250px) 被视为包含border 和padding 的宽度。因此，元素的实际内容区域只有 200px x 200px（不包括 50px 的水平和垂直边框）。

因此，子 div 将只有 200px x 200px 的大小（这可以在开发工具中验证）。当100px 的border-radius 从父级继承时，它变成一个圆形，因为它是其尺寸的一半。

因此，如果必须保持形状，则不能为子代继承 border-radius。它应该设置为80px（近似值）。（一开始我提到 76px 的值更好，我正试图找出原因 - 请参阅第 2 部分了解原因。）

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target"       
     style="position:absolute;
            top:100px;left:100px;
            width:250px;height:250px;
            border-radius:100px;
            border:25px solid red;">
  <div id="target" 
       style="position:relative;
              width:100%;height:100%;
              background-color:plum;
              border-radius:76px;">
  </div>
</div>

问题的第 2 部分：（即使移除了边框框，也会留下空隙）

这是因为分配的border-radius 是外边框的半径，而不是内边框的半径。 内边框半径计算为外边框半径减去边框厚度。

根据spec：

内边距（内边框）半径是外边框半径减去相应的边框厚度。

所以，孩子的border-radius 需要等于父母的内边框半径。也就是孩子的border-radius应该是75px（100px - 25px的边框粗细）。

这也是为什么border-radius 的 76 像素比前面提到的 80 像素效果更好的原因。 76px 比 80px 更接近 75px :)

不改变目标边框半径的解决方案：

如果子级（目标）上的border-radius: inherit 无法更改，那么唯一的选择是使子级的尺寸与父级相同（使用calc），定位它，然后在父级中剪裁溢出。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target" style="position:absolute;
            top:100px;left:100px;
            width:250px;height:250px;
            border-radius:100px;
            border:25px solid red;
            overflow: hidden;">
  <div id="target" style="position:relative;
              width:calc(100% + 50px);height: calc(100% + 50px);
              top: -25px; left: -25px;
              background-color:plum;
              border-radius:inherit;">
  </div>
</div>

【讨论】：

非常感谢您的解决方案，它为我指出了正确的方向，请看这个jsfiddle.net/ahd5hwrh/3 它即使没有溢出也可以工作：隐藏....您对填充方法有何看法？
@GibboK：不客气，伙计。我还添加了有关如何将孩子的边界半径分配/计算到我的答案中的更多详细信息。来到padding 方法，我不太确定这是否适用于所有浏览器。 padding 在所有 4 边上通常应该只在块元素上工作（img 不是）。所以，不能确定。
感谢您的反馈，祝您有美好的一天！
@GibboK: This 可以而且应该在所有浏览器中工作（受您的小提琴启发）。我已将padding 更改为border: 25px solid transparent。透明边框不会造成任何问题，保持角形状（半径），甚至img 也可以有边框:)

【解决方案2】：

尝试将目标 div 的相同背景颜色添加到主 div。

<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red; background-color:plum;">
        <div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
        </div>
    </div>

DEMO

【讨论】：

感谢您提供此解决方案，但在我的实际应用程序中，它也适用于图像标签，（对不起，我在最初的问题中没有提及）
@GibboK 在这种情况下使用通用颜色并使其适用于图像和 div image fiddle

【解决方案3】：

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50%;border:25px solid red;">
  <div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit"></div>
</div>

【讨论】：

对不起，没有解决我的问题，你假设一个圆圈，但我的问题发生在任何边界半径的仲裁值

【解决方案4】：

如果你想画一个圆，设置border-radius的值是%，而不是px。

【讨论】：

谢谢，但我不需要圈圈，请看我在问题中的编辑。

【解决方案5】：

你继承了固定值的边框半径，而子元素有其他尺寸。以百分比计算边界。在你的包装上使用border-radius:40%;。

【讨论】：

感谢您的帮助，但我无法更改问题中提到的内部元素的边框半径。
不，在外部使用 40% 并让它继承到内部。 40% 由包装器 250 像素宽度和 100 像素边框半径计算得出。看一看：jsfiddle.net/wugpnzeL
看着你的 jsfiddle 我仍然看到两个 div 之间的差距，它们应该是完全相邻的

【解决方案6】：

也许这会有所帮助。 css 现在设置在一个外部文件中。

border-radius:inherit; 检查已经存在的边界半径。所以它设置为那个边界半径。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper-target {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 250px;
  height: 250px;
  border-radius: 50px;
  border: 25px solid red;
  background-color: plum;
}
#target {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: plum;
  border-radius: inherit;
}

<div id="wrapper-target">
  <div id="target">
  </div>
</div>

【讨论】：