html - CSS3 border-radius 裁剪问题

Question

我有一个 border-radius 设置为某个值(比如 10px)的 div，以及一个嵌套的 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>
<!-- ... -->

我注意到尽管溢出被设置为隐藏，但父项并未将子项夹在圆 Angular 周围。另一个 stackoverflow 线程指出此行为是“设计使然”的:

How do I prevent an image from overflowing a rounded corner box with CSS3?

然而，在挖掘 CSS3 背景和边框的工作草案时......

http://www.w3.org/TR/css3-background/#corner-clipping

...我不禁注意到“Angular 裁剪”部分下的以下描述:

Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve

那我错过了什么？内容应该被剪到 Angular 落吗？我在看过时的信息吗？我做错了吗？

Answer 1

如果您在两个元素上都删除 position: relative;，则外部元素会将子元素剪裁在圆 Angular 周围。不知道为什么，如果它是一个错误。