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/