CSS错误的外观border-radius在嵌套的div [英] CSS wrong appearance of border-radius on a nested div

问题描述

使用以下HTML我需要：

• 确保 target div c>



• p>必须使用border-radius的任何值。

考虑到：

• 我使用 box-sizing：border-box; ，但也可以重置为默认值。 li>
  
• 我无法更改目标 div的 border-radius li>
  

  *，*：after，*：before {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;}  

 < div id =wrapper-targetstyle =position：absolute; top：100px; left：100px; width：250px; height：250px; border-radius：50px; border：25px solid red;> < div id =targetstyle =position：relative; width：100％; height：100％; background-color：plum; border-radius：inherit> < / div>< / div>  

/ p>

• 在此特定示例中，我不需要创建圈子。）

解决方案

问题的第1部分（儿童在原始演示中成为一轮）

问题是因为 box-sizing：border-box 。设置此选项时，框的定义高度，宽度（250 x 250像素）被视为包括 border 和 padding的宽度。因此，元素的实际内容区域只有200像素x 200像素（横向和纵向边框不包括50像素）。

因此， div 的大小只能为200像素x 200像素（开发工具）。当 border-radius 的 100px 从父级继承时，它将变为一个圆，因为它是其一半的维度。

因此，如果必须维护形状，则不能为子代继承 border-radius 。它应该设置为 80px （近似）。 （ ）

$ b $ $（$）$ b $
$ b

  *，*：after，*：before {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;}  

 < div id =wrapper-targetstyle =position：absolute; top：100px; left：100px; width：250px; height：250px; border-radius：100px; border：25px solid red;> < div id =targetstyle =position：relative; width：100％; height：100％; background-color：plum; border-radius：76px; < / div>< / div>  

---

问题的第2部分：（即使边框已删除，也会留下空白）

这是因为分配的 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-targetstyle =position：absolute; top：100px; left：100px; width：250px; height：250px; border-radius：100px; border：25px solid red; overflow：hidden;> < div id =targetstyle =position：relative; width：calc（100％+ 50px）; height：calc（100％+ 50px）; top：-25px; left：-25px; background-color：plum ; border-radius：inherit;> < / div>< / div>  

Using the following HTML I need to:

• Make sure that the border of target div (pink) is adjacent of the wrapper-target red border div.

• Must work on any value of border-radius.

Considering that:

• I am using box-sizing: border-box; but can be also reset to a default value.
• I cannot change the border-radius property of the target div.

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

NOTES:

• I do not need to make a circle in this specific example :).

解决方案

Part 1 of the problem: (Child becoming a round in original demo)

The problem is because of the box-sizing: border-box. When this is set, the defined height, width of the box (250 x 250px) is considered as inclusive of the width of the border and the padding. So, the element's actual content area is only 200px x 200px (excluding 50px for horizontal & vertical borders).

Thus the child div will only have a size of 200px x 200px (this can be verified in Dev tools). When a border-radius of 100px is inherited from parent, it becomes a round as that is half of its dimensions.

So, the border-radius cannot be inherited for the child if the shape has to be maintained. It should be set as 80px (approximate). (Initially I had mentioned that a value of 76px was working better and that I was trying to find out the reason for it - please refer to Part 2 for the reason.)

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

---

Part 2 of the problem: (even when border-box is removed, it leaves a gap)

This is because the assigned border-radius is the radius of the outer border and not that of the inner border. The inner border radius is calculated as outer border radius minus border thickness.

As per spec:

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

So, the child's border-radius need to be equal to the inner border radius of the parent. That is, the child's border-radius should be 75px (100px - 25px thickness of border).

This is also why a border-radius of 76px worked better than the 80px as mentioned earlier. 76px is closer to 75px than 80px :)

---

Solution without changing border radius of target:

If border-radius: inherit on the child (target) cannot be changed then the only option is to make the child the same dimensions as parent (using calc), positioning it and then clipping the overflow in parent.

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

这篇关于CSS错误的外观border-radius在嵌套的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！