html - 图像周围的圆 Angular 边框不显示

Question

如您所见，边 Angular 处缺少边框(红色)。如果我把它做成 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 以支持旧版浏览器。