CSS 边框半径不修剪 Webkit 上的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8705249/
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
CSS Border radius not trimming image on Webkit
提问by Sotkra
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
我在使用 chrome 而不是 firefox 或 ie9 时无法弄清楚为什么我的 #screen 元素中的 border-radius 消失了？
I have all the different prefixes for each browser plus the standard border-radius:
我有每个浏览器的所有不同前缀加上标准的边界半径：
www.cenquizqui.com
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
上面存放图片的内容框，称为#screen
a copy paste of screen's css:
复制粘贴屏幕的 css：
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
是不是因为 chrome 不能正确处理图像的“修剪”？我认为这只是一个问题，当你在圆角容器中有实际的标签时，而不是当 img 通过 css 被称为背景图像时。
Regards G.Campos
问候 G.坎波斯
采纳答案by Sotkra
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
Webkit 无法处理子代和孙代+ 的边框半径裁剪。就是这么糟糕。如果你想要边框裁剪，它必须直接在图像所在的 div 上，而不是深入到层次结构中。
回答by Adam
Here's a workaround that will fix the current chrome bug:
这是一个可以修复当前 chrome 错误的解决方法：
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99workaround - which is great workaround, too, by the way).
这根本不会影响显示（与opacity:0.99解决方法不同- 顺便说一下，这也是很好的解决方法）。
回答by DutchKevv
There is a much simpler solution.
有一个更简单的解决方案。
Just add overflow:hiddento the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
只需添加overflow:hidden到具有边界半径并保存子元素的容器。这可以防止孩子在容器上“流动”..从而解决问题并显示边界半径
回答by kirtan-shah
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
对设置了 border-radius 的元素的子元素尝试以下 css：
opacity:0.99;它解决了问题，并且没有太大改变不透明度。这对我来说非常有效。
回答by justinlabenne
It looks like you need to apply the border radius to the li element:
看起来您需要将边框半径应用于 li 元素：
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
回答by Purag
It very much does have a border radius:
它确实有一个边界半径：
(I just added a border with Chrome's dev toolbar.)
（我刚刚用 Chrome 的开发工具栏添加了一个边框。）
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
边框半径不会将其内容限制在结果区域内 - 角外的空间仍可被元素的内容占用。
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
我的建议是覆盖一个像这样切角的图像（然后使用地图或任何你觉得舒服的东西来仍然启用左/右箭头）。
