img的圆角边框

这就是我想要实现的。img的圆角边框

enter image description here

我想让它尽可能的灵活，所以我分裂，巴入左上角，左，右上角等。

这是我曾尝试：

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

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

/*编辑*/

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

enter image description here

为u可以SSE的边界从角落失踪。如果我使它4+像素厚然后它确定，但我需要它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 */ 
}

来源

2011-09-30 PDFedit

如何使用'border-radius'？ –

它是由IE支持的吗？ – PDFedit

从IE9开始支持边界半径，并支持其他大多数较新的浏览器。如果您使用-moz-前缀，则Firefox从版本1.0（！）开始。 –

您应该考虑使用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/

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

来源

2011-09-30 11:41:15

我试过了，在我的IE浏览器中我没有看到效果，那就是为什么我去了PNG解决方案。（我有IE 8） – PDFedit

“从IE9开始支持Border-radius ...” –

@PDFedit正如上面评论所述，IE9支持'border-radius'。正如我在答案中所建议的那样，您可以使用CSS3Pie来处理IE <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; 
}

来源

2011-09-30 11:55:31 Chris

有一个hack的使用边界-radius在IE8（及以前版本）和它非常挑剔，首先下载这个.htc解决方案：Curved Corner并将其上传到您的网站。那么无论你需要一个边界半径，应用此CSS：

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

使用它作为最后的手段。

来源

2011-09-30 11:57:45

img的圆角边框

回答

相关问题