html - img 周围的圆形边框

Question

这就是我想要实现的目标。

我想让它尽可能灵活，所以我将png分成左上角，左，右上角等。

这是我尝试过的:

<div class="top">
<div class="lt">
    <div class="lr">
        <img src='somepicture.jpg' />
    </div>
</div>
</div>

.win{width:182px;}
.win .lt{background:url('../img/5.png') no-repeat left top;}
.win .lr{background:url('../img/7.png') no-repeat right top;}
.win .top{background:url('../img/6.png')  top;}
.win .l{background:url('../img/2.png') no-repeat left;}
.win .top,.win .lt, .win .lr{height:10px;padding:0;margin 0;overflow:hidden;}

.win .l 不适合图像的高度。

也许我的整个方法都是错误的。解决此类问题的最佳实践是什么？

/* 编辑 */

看起来这个解决方案对我不起作用:

据你所知， 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 */
} 

Answer 1

您应该考虑使用border-radius，它可以在所有现代浏览器中为您提供圆 Angular :

.something{
   border-radius:4px;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
}

更多信息请点击:https://developer.mozilla.org/en/CSS/border-radius

您可以使用此工具来确定大小:http://border-radius.com/

注意:如果您需要 IE<9 的支持，可以使用 http://css3pie.com/