CSS3边界半径裁剪问题

问题描述

这不是设计使然，Firefox对此存在一个突出缺陷。在任何WebKit浏览器中都可以正常工作。在Firefox中，您也必须将边框半径添加到所包含的元素中，或者使用某种hack。

解决方法

我有一个div，其border-radius设置为某个值（比方说10px），还有一个嵌套的div，它是其父级的完整宽度和高度。

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->

我注意到，尽管溢出被设置为隐藏，但父母并没有将孩子夹在圆角上。另一个stackoverflow线程指示此行为是“设计使然”：

…我不禁注意到“拐角裁剪”部分中的以下描述：

剪切到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线。替换元素的内容始终修剪到内容边缘曲线

那我想念什么呢？是否应该将内容夹在角落？我在查看过时的信息吗？我做错了吗？