CSS嵌套div的border-radius错误显示问题

Question

使用以下HTML，我需要做到：

• 确保目标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>

注意：

• 在这个特定的例子中，我不需要画一个圆形 :）。

- GibboK

---

您的包裹目标宽度和高度为250px，但边框半径为100px。要使其变圆，您必须使用125px的边框半径;-)或者只需使用border-radius：50％;，这对于圆形元素来说更好，因为您可以更改宽度和高度，并且它仍然适合。 - Simon Kraus

你想要消除订单和目标div之间的空白吗？ - Sowmya

@Sowmya 正确！我对我的问题进行了编辑，我改变了边框的半径，这样就不会有混淆了 :) - GibboK

@GibboK，由于您已经为第一个 div 设置了 border-radius: 50%;，如果您为第二个 div 设置 border-radius: 15%;，它可能会完美地适配 wrapper-target。 - Iqbal Pasha

@GibboK：如果目标上的border-radius无法更改，那么我认为唯一的选择是使子元素与父元素具有相同的尺寸（使用calc），将其定位，然后在父元素中剪切overflow。我已经在我的答案中添加了一个示例，希望能对您有所帮助。 - Harry

Answer 1

问题的第一部分：（孩子在原始演示中变成了一个圆形）

问题出在box-sizing: border-box上。当设置这个属性时，盒子的定义高度和宽度（250 x 250像素）被认为包括了border和padding的宽度。因此，元素的实际内容区域只有200像素 x 200像素（不包括水平和垂直边框的50像素）。

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

因此，如果要保持形状，则子元素不能继承border-radius。应该将其设置为80像素（大约）。(最初我提到76像素的值更好，并且我正在试图找出原因 - 请参见第二部分的原因。)

*,
*: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>

---

问题的第二部分：（即使删除了border-box，它仍然留下了间隙）

这是因为指定的border-radius是外边框的半径而不是内边框的半径。 内边框半径计算方法为：外边框半径减去边框厚度。

根据规范：

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

因此，子元素的border-radius需要等于父元素的内边框半径。也就是说，子元素的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>

- Harry

---

非常感谢您的解决方案，它指引了我正确的方向，请看这个 https://jsfiddle.net/ahd5hwrh/3/ 即使没有 overflow:hidden 也可以工作...您认为填充方法怎么样？ - GibboK

@GibboK：不客气，伙计。我在我的答案中还添加了更多关于如何分配/计算子元素边框半径的细节。至于“填充”方法，我不确定它是否适用于所有浏览器。通常情况下，四个方向上的填充应该只对块级元素（img不是块级元素）有效。所以，不能确定。 - Harry

感谢您的反馈，祝您有美好的一天！ - GibboK

@GibboK: 这个 在所有浏览器中都可以工作（受你的小提琴启发）。我已经用 border: 25px solid transparent 替换了 padding。透明边框不会引起任何问题，保持角落形状（半径），甚至 img 也可以有边框 :) - Harry

Answer 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

- Sowmya

---

谢谢您提供的解决方案，但在我的实际应用中，它也应该适用于图像标签（很抱歉我在最初的问题中没有提到）。 - GibboK

@GibboK 如果是这样，可以使用一个常见的颜色，并使其适用于图像和 div image fiddle - Sowmya

Answer 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>

- itzmukeshy7

---

抱歉，这并没有解决我的问题。您假设了一个圆形，但是我的问题发生在任何边框半径值的情况下。 - GibboK

Answer 4

如果你想制作一个圆形，请将border-radius的值设为百分比而不是像素。

- exoslav

---

谢谢，但我不需要画一个圆，请看一下我在问题中的编辑。 - GibboK

Answer 5

当您的子元素具有其他尺寸时，您会继承一个固定值的border-radius。以百分比计算边框。在包装器上使用border-radius:40%;。

- Simon Kraus

---

谢谢您的帮助，但是我无法像我在问题中提到的那样更改内部元素的边框半径。 - GibboK

不，将外部的40%使用，并让内部继承。这个40%是由包装器的250像素宽度和100像素边框半径计算出来的。请看：https://jsfiddle.net/wugpnzeL/ - Simon Kraus

看了你的 jsfiddle，我仍然看到两个 div 之间有一个间隙，它们应该是完全相邻的。 - GibboK

Answer 6

也许这会有所帮助。CSS现在设置在外部文件中。 border-radius:inherit; 检查已经存在的 border-radius。因此，它将设置为该 border-radius。

*,
*: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>

- Dionoh