CSS在图像问题上圆角

Question

我在使用CSS3围绕img的角落时遇到了麻烦：

这是我正在使用的代码：

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;
    }

正如您所看到的，外边框是圆形的，但实际的img是平方的。使用CSS3我如何围绕实际图像的角落？

Answer 1

使用两个带圆角的容器（不是img），不要忘记内部的overflow: hidden：

示例代码： http://jsfiddle.net/jackJoe/YhDXm/

Answer 2

与前两个类似的答案。在图像周围使用跨度并将border-radius应用于两者。

这里有一个更详细的演练：http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

有些浏览器开始更好地处理这个问题，但仍有一些情况会显示图像的正方形。

Answer 3

在图片周围放置<div>并将border-radius应用于该包装器。添加overflow: hidden;，你就可以了。这是因为<img>标记不能有圆角。