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的圓角邊框

回答

相關問題