html - border-radius 在嵌套 div 上的 CSS 错误外观

Question

我需要使用以下 HTML:

• 确保 target div 的边框(粉红色)与 wrapper-target 红色边框 div 相邻。

• 必须对 border-radius 的任何值起作用。

考虑到:

• 我正在使用 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>

注意事项:

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

Answer 1

问题的第 1 部分:(在原始演示中 child 变成了一个回合)

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

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

因此，如果必须保持形状，则不能为 child 继承 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-box，它也会留下一个空隙)

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

根据 spec :

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.

因此，子项的border-radius 需要等于父项的内边界半径。也就是说， child 的 border-radius 应该是 75px(100px - 25px 的边框厚度)。

这也是为什么 76px 的 border-radius 比前面提到的 80px 效果更好的原因。 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>