CSS 在嵌套 div 上出现边框半径的错误外观

使用以下 HTML 我需要：

确保target div（粉红色）的边框与wrapper-target红色边框div 相邻。
必须处理边界半径的任何值。

考虑到：

我正在使用box-sizing: border-box;但也可以重置为默认值。
我无法更改targetdiv 的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 部分：（孩子在原始演示中变成一轮）

问题是因为box-sizing: border-box.设置此选项后，定义的高度，框的宽度（250 x 250px）被视为包括border和padding的宽度。因此，元素的实际内容区域仅为200px x 200px（不包括水平和垂直边框的50px）。

因此，子div的大小只有 200px x 200px（这可以在开发工具中进行验证）。当100px的border-radius从父级继承时，它就变成了圆形，因为它是其尺寸的一半。

因此，如果必须保持形状，则不能为子项继承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-radius是外部边框的半径，而不是内部边框的半径。内边框半径计算为外边框半径减去边框厚度。

根据规格：

填充边缘（内边框）半径是外边框半径减去相应的边框粗细。

因此，孩子的border-radius需要等于父项的内部边界半径。也就是说，孩子的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>

尝试将目标div 的相同 bg 颜色添加到主div。

<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red; background-color:plum;">
        <div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
        </div>
    </div>

演示

*, *: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:50%;border:25px solid red;">
  <div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit"></div>
</div>

如果要

制作圆，请以%而不是px为单位设置边框半径的值。

继承具有

固定值的边框半径，而子元素具有其他维度。以百分比计算边框。在包装上使用border-radius:40%;。

Maby 这将提供帮助。css 现在在外部文件中设置。

border-radius:inherit;检查已经存在的边界半径。所以它设置为该边界半径。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper-target {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 250px;
  height: 250px;
  border-radius: 50px;
  border: 25px solid red;
  background-color: plum;
}
#target {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: plum;
  border-radius: inherit;
}

<div id="wrapper-target">
  <div id="target">
  </div>
</div>

相关内容

最新更新

热门标签：