Html img周围的圆形边框

这就是我想要实现的目标

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

以下是我尝试过的：

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

.win.l

与图像的高度不匹配

也许我的整个方法都错了。解决此类问题的最佳做法是什么

/*编辑*/

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

正如你所能看到的，角落里缺少了边界。如果我让它4+px厚，那么它可以，但我需要它1px薄。为什么这是一个问题

html

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

---

你应该考虑使用<代码>边界半径，它给你所有现代浏览器中的圆角：

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

更多信息请点击此处：

您可以使用此工具确定尺寸：

---

NB:如果您需要对IEBorder radius的支持，这将是一个很好的发展方向，因为它很简单，IE有一个黑客是在IE8（及更老版本）中使用Border radius的，而且非常繁琐， 首先下载这个.htc解决方案：并将其上传到您的站点。然后，在需要边界半径的地方，应用以下CSS：

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}

---

使用它作为最后手段。

使用

边界半径如何

？IE9及以后版本以及大多数其他较新浏览器都支持边界半径。如果您使用-moz-前缀，Firefox从1.0版（！）开始就有了。标记中的

.win

和

.l

在哪里？另外，标记中的

文本在哪里？我尝试了这个，但在IE中没有看到效果，这就是我选择png解决方案的原因。（我有IE 8）“从IE9开始支持边界半径…”@PDFedit如上面的评论所述，
边界半径从IE9开始支持。正如我在回答中所建议的，你可以使用CSS3Pie来治疗IE
.something{
   border-radius:4px;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
}

<div>
    <img />
    <span class="tl"></span>
    <span class="tr"></span>
    <span class="bl"></span>
    <span class="br"></span>
</div>

div {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
}

span {
    position: absolute;
    background: blue;
    height: 20px;
    width: 20px;
    display: block;
}

span.tl {
    top: 0; left: 0;
}
span.tr {
    top: 0; right: 0;
}
span.bl {
    bottom: 0; left: 0;
}
span.br {
    bottom: 0; right: 0;
}

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}