Html CSS3 边框半径裁剪问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3248734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 border-radius clipping issues
提问by cdata
I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.
我有一个边界半径设置为某个值（假设为 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>
<!-- ... -->
I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":
我注意到尽管溢出被设置为隐藏，但父母并没有在圆角周围夹住孩子。另一个 stackoverflow 线程表明此行为是“设计使然”：
How do I prevent an image from overflowing a rounded corner box with CSS3?
However, upon digging up the working draft for CSS3 backgrounds and borders...
然而，在挖掘 CSS3 背景和边框的工作草案时......
...I couldn't help but notice the following description under the "corner clipping" section:
...我不禁注意到“角落剪裁”部分下的以下描述：
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
裁剪到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须裁剪到曲线。替换元素的内容总是修剪到内容边缘曲线
So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?
那么我错过了什么？内容是否应该被剪裁到角落？我在看过时的信息吗？我做错了吗？
采纳答案by robertc
It's not by design, there's an outstanding defect in Firefoxabout this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.
这不是设计使然，Firefox在这方面有一个突出的缺陷。在任何 WebKit 浏览器中都应该可以正常工作。在 Firefox 中，您也必须向包含的元素添加边框半径，或者使用某种 hack。
回答by knut
If you remove position: relative;on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.
如果position: relative;在两个元素上都删除，则外部元素会在圆角周围夹住子元素。不知道为什么，如果它是一个错误。
回答by robertc
I came here looking for an answer because I had a similar problem in Chrome 18.
我来这里是为了寻找答案，因为我在 Chrome 18 中遇到了类似的问题。
I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.
我试图有一个圆形框，里面有两个元素 - 标题和索引号 - 索引号绝对位于框的左下角。
What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:
我注意到的是，如果我有这样的 HTML，即使在父元素上将溢出设置为隐藏，标题元素也会在圆角（边界半径）之外流血：
<a>
<div style="overflow:hidden; border-radius:15px; position:relative;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
But if I moved the relative positioning up one parent element everything looked good:
但是，如果我将相对定位向上移动一个父元素，一切看起来都不错：
<a style="position:relative;">
<div style="overflow:hidden; border-radius:15px;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
回答by Eric
Just wanted to chime in on this one since I found this with a similar problem.
只是想加入这个，因为我发现这个问题有类似的问题。
In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.
在溢出设置为滚动的 div 中，除非内容滚动到绝对顶部或底部，否则边框半径在滚动时不会裁剪内容。即便如此，如果我将文档也滚动到绝对顶部或底部，剪辑有时才会重新出现。
On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.
在百灵鸟上，我为元素添加了一个透明边框，这似乎强制对角进行剪裁。由于我已经在元素周围有一些空间，我只是将其切成两半并将其余部分应用于边框厚度。不理想，但我最终得到了我想要的结果。
Tested in Chrome, Safari and Firefox on Mac.
在 Mac 上的 Chrome、Safari 和 Firefox 中测试。
