孩子在原始演示中成为一轮)
问题是由于@R_895_2419@-sizing: border- @R_895_2419@
。当设定,在限定的高度,箱(250×250像素)的宽度被认为是包括的宽度的border
和padding
。因此,元素的实际内容区域仅为200px x 200px(水平和垂直边框不包括50px)。
因此,子级div
的大小仅为200px x 200px( 可以在Dev工具中验证 )。当border-radius
of100px
是从父项继承而来时,由于其尺寸的一半,因此变为圆形。
因此,border-radius
如果必须保持形状,则不能为孩子继承。应将其设置为80px
(近似值)。(起初,我提到过一个76px的值可以更好地工作,并且我试图找出它的原因-请参阅第2部分 。)
*,
*:after,
*:before {
-webkit-@R_895_2419@-sizing: border-@R_895_2419@;
-moz-@R_895_2419@-sizing: border-@R_895_2419@;
@R_895_2419@-sizing: border-@R_895_2419@;
}
<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-radius
是外边界的半径,而不是内边界的半径。所述 被计算为外边界半径减去边框厚度。
根据规格:
填充边缘(内部边界)半径是外部边界半径减去相应的边界厚度。
因此,孩子的border-radius
需要等于父母的 。也就是说,孩子的边框border- radius
应该是75px
(100px-25px的边框厚度)。
这也就是为什么border-radius
76px的a 比前面提到的80px更好的原因。76px比80px更接近75px :)
如果border-radius: inherit
不能更改子对象(目标),则唯一的选择是使子对象与父对象具有相同的尺寸(使用calc
),放置子对象,然后剪辑父对象中的溢出。
*,
*:after,
*:before {
-webkit-@R_895_2419@-sizing: border-@R_895_2419@;
-moz-@R_895_2419@-sizing: border-@R_895_2419@;
@R_895_2419@-sizing: border-@R_895_2419@;
}
<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>