图像问题上的 CSS 圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6856711/
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 rounded corners on an image problem
提问by Rob
I'm having trouble rounding the corners of an img using CSS3:
我在使用 CSS3 将 img 的角四舍五入时遇到了问题：
This is the code I'm using:
这是我正在使用的代码：
img.event-thumbimage {
height:120px;
width:140px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4d4d;
-moz-box-shadow: 0px 0px 10px 0px #4d4d4d;
box-shadow: 0px 0px 10px 0px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border:solid white 3px;
float:left;
margin-right:25px;
}
As you can see, the outer border is rounded but the actual img is squared off. Using CSS3 how can I round the corners on the actual image as well?
如您所见，外边框是圆形的，但实际的 img 是方形的。使用 CSS3 如何使实际图像的角变圆？
回答by HymanJoe
use two containers, both with the rounded corners (not the img), and don't forget the overflow: hiddenon the inner:
使用两个容器，都带有圆角（不是img），不要忘记overflow: hidden内部的 ：
example code here: http://jsfiddle.net/HymanJoe/YhDXm/
示例代码在这里：http: //jsfiddle.net/HymanJoe/YhDXm/
回答by TheBozzMan
A similar answer to the previous two. Use a span around the image and apply the border-radius to both.
与前两个类似的答案。在图像周围使用跨度并将边界半径应用于两者。
There is a more detailed walkthrough here: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html
这里有更详细的演练：http: //easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html
Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.
一些浏览器开始更好地处理这个问题，但仍然有图像的正方形显示出来的情况。
回答by Karl Laurentius Roos
Put a <div>around the image and apply the border-radiusto that wrapper. Add overflow: hidden;and you're good to go. This is because <img>tags can't have rounded corners.
<div>在图像周围放置一个并将 应用border-radius到该包装器。添加overflow: hidden;，您就可以开始了。这是因为<img>标签不能有圆角。
