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

与前两个类似的答案。 使用图像周围的跨度并将边界半径应用于两者。

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

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

Answer 3

在图像周围放置一个<div>并将border-radius应用于该包装器。 添加overflow: hidden; 而你很高兴。 这是因为<img>标签不能有圆角。