我需要使用以下 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>
注意事项:
- 我不需要在这个具体的例子中画一个圆圈:)。
最佳答案
问题的第 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>
关于html - border-radius 在嵌套 div 上的 CSS 错误外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35984449/