CSS关于图像圆角的问题
我在使用 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;
}
如您所见，外边框是圆形的，但实际图像是方形的。使用CSS3我怎样才能在实际图像上圆角？
I'm having trouble rounding the corners of an img using CSS3:
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用两个容器，都带有圆角（不是
img），并且不要忘记内部的overflow:hidden：示例代码如下：
http://jsfiddle.net/jackJoe/YhDXm/
use two containers, both with the rounded corners (not the
img), and don't forget theoverflow: hiddenon the inner:example code here:
http://jsfiddle.net/jackJoe/YhDXm/
与前两个类似的答案。在图像周围使用跨度并将边框半径应用于两者。
这里有更详细的演练： http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html
一些浏览器开始更好地处理这个问题，但仍然存在图像的正方形显示出来的情况。
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
Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.
在图像周围放置一个
并将border-radius应用于该包装器。添加overflow:hidden;就可以了。这是因为![]()
Put a
<div>around the image and apply theborder-radiusto that wrapper. Addoverflow: hidden;and you're good to go. This is because<img>tags can't have rounded corners.