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

  • Z时代
  • 2024-01-10
  • 分类：问答

使用以下HTML，我需要：

  • 确保target div（粉红色）的wrapper-target边框与红色边框div 相邻。

  • 必须在任何边界半径值上工作。

考虑到：

  • 我正在使用，box-sizing: border-box;但也可以重置为默认值。

  • 我无法更改div 的border-radius属性target。

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

笔记：

  • 在此特定示例中，我不需要绕圈:)。

回答：

孩子在原始演示中成为一轮）

问题是由于box-sizing: border-

box。当设定，在限定的高度，箱（250×250像素）的宽度被认为是包括的宽度的border和padding。因此，元素的实际内容区域仅为200px

x 200px（水平和垂直边框不包括50px）。

因此，子级div的大小仅为200px x 200px（ 可以在Dev工具中验证 ）。当border-radiusof

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"
     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-radius76px的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" 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>

以上是 嵌套div上CSS的边框半径错误显示 的全部内容， 来源链接： utcz.com/qa/404839.html

回到顶部