小编典典

边框半径是否应该剪切内容?

css

容器装好后,不应该将容器中的物品切掉border-radius吗?

示例HTML和CSS:

.progressbar { height: 5px; width: 100px; border-radius: 5px; }

.buffer { width: 25px; height: 5px; background: #999999; }


<div class="progressbar">

    <div class="buffer"></div>

</div>

如您所见,我border- radius在容器(.progressbar)上使用,但内容(.buffer)在容器的“外部”。我在Google
Chrome上看到了这个。

这是预期的行为吗?

PS这不是关于如何修复它,而是关于它是否应该像这样工作。


阅读 224

收藏
2020-05-16

共1个答案

小编典典

这是预期的行为吗?

是的,听起来确实很疯狂。原因如下:

默认overflow<div>元素(和大多数其他的东西)是visible和规范说这约overflow:visible

visible
此值指示未裁剪内容,即,内容可能在块框外呈现。

反过来,“背景和边框”模块中的第5.3节“边角修剪”表示:

框的背景而不是其边框图像被裁剪为适当的曲线(由“ background-clip”确定)。
修剪到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须修剪到曲线。
替换元素的内容始终会修剪到内容边缘曲线。同样,边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。

我已经特别强调了一句提到,overflow盒子的值必须大于其他的东西visible(这意味着autohiddenscroll等),以便边角裁剪其子。

如果该框被定义为具有可见的溢出(就像我说的是大多数视觉元素的默认值),则该内容根本不应被剪切。这就是为什么的直角.buffer超过的圆角的原因.progressbar

因此,最简单的.buffer裁剪内部.progressbar圆角的方法是为其添加overflow:hidden样式.progressbar

2020-05-16