Html Chrome 错误中的边界半径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7739708/
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
border-radius in Chrome bug?
提问by Dorel
I have a problem with the border-radius in chrome this is my code:
我在 chrome 中的边框半径有问题，这是我的代码：
img{
border-radius: 24px;
border: 2px solid #c7c7c7;
-moz-border-radius:24px;
-webkit-border-radius: 24px;
}
On mozzila it works fine, but on chrome it looks funny... On mozzila I can see a circle bordering my image, but on chrome the circle crops the borders and all i can see are straight line
在 mozzila 上它工作正常，但在 chrome 上它看起来很有趣......在 mozzila 上我可以看到一个圆圈与我的图像接壤，但在 chrome 上圆圈裁剪了边框，我能看到的都是直线
a screenshot: http://postimage.org/image/27turq0mc/
截图：http: //postimage.org/image/27turq0mc/
can you help?
你能帮我吗？
采纳答案by Sotiris
this is probably a chrome bug. A solution could be to wrap the imgwith a divand make the following css:
这可能是一个 chrome 错误。一个解决方案可能是img用 a包裹div并制作以下css：
img{
-moz-border-radius:24px;
-webkit-border-radius: 24px;
border-radius: 24px;
display:block;
}
div {
border: 2px solid #c7c7c7;
border-radius: 24px;
-webkit-border-radius: 24px;
width:40px; /* the width of image */
height:40px; /* the height of image */
}
回答by Vinicius José Latorre
I had the same problem and the solution provided by:
我有同样的问题和提供的解决方案：
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
fixed the problem.
解决了这个问题。
First it shows the solution using only CSS3 & HTML and then it presents the solution using JQuery.
首先它展示了仅使用 CSS3 和 HTML 的解决方案，然后它展示了使用 JQuery 的解决方案。
回答by user2716666
instead of just the below code for border
而不仅仅是下面的边框代码
-moz-border-radius: 2px 2px 15px 15px;
For the radius to be applied clockwise starting from top-left, you can't do that for Webkit at the moment. So you have to write it out long hand like:
对于从左上角开始顺时针应用的半径，您目前无法为 Webkit 执行此操作。所以你必须像这样写出长手：
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
回答by Thomas Andreè Wang
Try doing it on a background image instead of on a html img element, as some img elements dont work with border radius (yet i gueass).
尝试在背景图像而不是 html img 元素上执行此操作，因为某些 img 元素不适用于边框半径（但我猜）。
div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}
