html - img 周围的圆 Angular 边框

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/