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不适合图像的高度。

也许我的整个方法都是错的。这个问题的最佳做法是什么？

/ *编辑* /

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

因为你可以看到角落里缺少边框。如果我把它做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，它可以在所有现代浏览器中为您提供圆角：

.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＆lt; 9，可以使用http://css3pie.com/

Answer 2

边界半径确实是一个很好的前进方式，因为它很简单，IE＆lt; 9只需要用一个视觉上吸引人的网站。不过，如果您想使用角落图像选项，请参阅：

http://jsfiddle.net/chricholson/JS5AG/

HTML：

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

CSS：

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;
}

Answer 3

在IE8（和更老版本）中使用border-radius有一个hack是非常挑剔的， 首先下载此.htc解决方案：Curved Corner并将其上传到您的网站。然后，只要您需要边框半径，请应用此CSS：

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

将它作为最后的手段使用。