縮略圖上的圓角

Question

使用css可以使縮略圖的角落變圓嗎？

編輯 - 在HTML的出發點是：

<img src='test.jpg' width='50' height='50' /> 

它沒有CSS就可以開始和我的是那些想圓邊角有點...

編輯+注意： moz-border方法並不真正圍繞圖像本身的角落，這正是我所希望的，而是圍繞圖像圍繞在一個邊緣廣場的角落。看起來不錯...

Answer 1

擴大@克萊頓的回答是：

您可以在任何現代原生瀏覽器做到這一點：

-moz-border-radius: 5px; 
border-radius: 5px; 

廠商前綴-moz可能會很快消失。

請參閱this jsfiddle看到它的行動。另請注意，舍入直接應用於<img>元素。

這適用於所有5個主要瀏覽器的所有當前版本。

Answer 2

爲了更好地說明這一點，以下兩行將在Firefox，Chrome和IE9中實現預期效果。

-moz-border-radius: 5px; 
border-radius: 5px; 

更多信息可以在這裏找到： http://www.css3.info/preview/rounded-border/

要在IE8做到這一點，你需要使用JavaScript。這jQuery的插件會做的伎倆：http://jquery.malsup.com/corner/

Answer 3

是使用漂亮的角技術。漂亮的角落是產生圓角邊緣的古老方式。它會在所有瀏覽器（舊的和新的瀏覽器）功能

http://www.html.it/articoli/nifty/index.html

Answer 4

您可以使用border-radius。它在<img>元素上不起作用，但您可以將border-radius應用於<div>，圖像作爲背景圖像。

Answer 5

此代碼將圍繞所有四個角落，它也支持Opera。

img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } 

克萊頓的解決方案只是一個輪頂部兩個角，這可能是也可能不是你要找的內容。