嵌套div上CSS的边框半径错误显示

嵌套div上CSS的边框半径错误显示

问题的第1部分：（ 孩子在原始演示中成为一轮）

问题是由于

box-sizing: border-box

。当设定，在限定的高度，箱（250×250像素）的宽度被认为是包括的宽度的

border

和

padding

。因此，元素的实际内容区域仅为200px
x 200px（水平和垂直边框不包括50px）。

因此，子级

div

的大小仅为200px x 200px（ 可以在Dev工具中验证 ）。当

border-radius

of

100px

是从父项继承而来时，由于其尺寸的一半，因此变为圆形。

因此，

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"     >  <div id="target"       >  </div></div>

---

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

这是因为指定的

border-radius

是外边界的半径，而不是内边界的半径。所述 内圆角半径 被计算为外边界半径减去边框厚度。

根据规格：

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

因此，孩子的

border-radius

需要等于父母的 内边界半径 。也就是说，孩子的边框

border-radius

应该是

75px

（100px-25px的边框厚度）。

这也就是为什么

border-radius

76px的a 比前面提到的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" >  <div id="target" >  </div></div>