图像问题上的CSS圆角答案

【问题标题】：CSS rounded corners on an image problem图像问题上的CSS圆角
【发布时间】：2012-12-15 02:50:07
【问题描述】：

我在使用 CSS3 圆角时遇到问题：

这是我正在使用的代码：

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 如何在实际图像上也可以圆角？

【问题讨论】：

标签： css rounded-corners

【解决方案1】：

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

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

【讨论】：

@Rob 它告诉容器不要显示更多可用的宽度和/或高度；它也可以设置为自动（如果需要显示滚动条）和可见（滚动条始终存在）。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

这只是给了我与以前相同的效果，只是设置不同。 img 仍然是方形的，外面的边框是圆形的。