img周围的圆形边框没有显示

Question

因为你可以看到角落里缺少边框（红色边框）。如果我把它做4+ px厚，那么它可以，但我需要它1px薄。为什么这是一个问题？这个属性是否像这样设计？

html

<div class="win" >  
<img class="rounded" src='red.jpg' />
</div>

和 css

.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;  
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
} 

/ 修改 /

最后我找到了一个能够完全满足我需要的解决方案。我分享链接也许别人有同样的问题：

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

Answer 1

您应该查看background-clip css属性。试试background-clip: padding-box。您还应添加-webkit-background-clip和-moz-background-clip以支持旧浏览器。

Answer 2

在大多数/所有浏览器中使用border-radius与图像存在问题。有很多关于此的在线文章，但我没有注意到它们。你应该谷歌那些。

Answer 3

如果你想要适用于大量浏览器的良好圆形边框，你可以使用图像作为具有所需css属性的div的背景。
示例（仅边框，没有别的）：
的 HTML

<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>

<强> CSS

.card {
    border:1px solid #000;  
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}