如何绕过Chrome（和其他webkit浏览器）中的图像角落？

Question

在Firefox中，如果我将图像放在元素中然后使用border-radius，Firefox会剪切图像，看起来很棒！在IE9中以相同的方式工作（太棒了！）。在Chrome（或任何webkit浏览器）中，边框是圆形的，但它不会剪切图像，看起来很糟糕。我做错了什么？

border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;

Answer 1

将它放入div？ 并单独设计它们。

http://jsfiddle.net/Stijntjhe/bFECN/1/

Answer 2

我不相信规范在这种情况下定义得很好，因此有两种不同的结果。

如果没有填充，WebKit将根据边框半径剪切图像。请参阅：http://jsfiddle.net/bFECN/5/

然而，规范中没有任何内容表明填充也必须是半径绘图的一部分。

Answer 3

这个问题是在一年多前发布的，webkit与图像边界半径支持有同样的问题。所以我用一个小技巧来解决这个问题，而不是使用css边框，我使用双框阴影更改方法。在你的情况下应该是这样的。

-webkit-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
-moz-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;

border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;