容器装好后,不应该将容器中的物品切掉border-radius吗?
border-radius
.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上看到了这个。
border- radius
.progressbar
.buffer
这是预期的行为吗?
PS这不是关于如何修复它,而是关于它是否应该像这样工作。
是的,听起来确实很疯狂。原因如下:
默认overflow的<div>元素(和大多数其他的东西)是visible和规范说这约overflow:visible:
overflow
<div>
visible
overflow:visible
visible 此值指示未裁剪内容,即,内容可能在块框外呈现。
反过来,“背景和边框”模块中的第5.3节“边角修剪”表示:
框的背景而不是其边框图像被裁剪为适当的曲线(由“ background-clip”确定)。 修剪到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须修剪到曲线。 替换元素的内容始终会修剪到内容边缘曲线。同样,边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。
我已经特别强调了一句提到,overflow盒子的值必须大于其他的东西visible(这意味着auto,hidden,scroll等),以便边角裁剪其子。
auto
hidden
scroll
如果该框被定义为具有可见的溢出(就像我说的是大多数视觉元素的默认值),则该内容根本不应被剪切。这就是为什么的直角.buffer超过的圆角的原因.progressbar。
因此,最简单的.buffer裁剪内部.progressbar圆角的方法是为其添加overflow:hidden样式.progressbar。
overflow:hidden