使用以下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>
注意:
- 在这个特定的例子中,我不需要画一个圆形 :)。
border-radius:50%;
,这对于圆形元素来说更好,因为您可以更改宽度和高度,并且它仍然适合。 - Simon Krausborder-radius
无法更改,那么我认为唯一的选择是使子元素与父元素具有相同的尺寸(使用calc
),将其定位,然后在父元素中剪切overflow
。我已经在我的答案中添加了一个示例,希望能对您有所帮助。 - Harry