將圓角添加到矩形柵格圖像

Question

使用CSS / JS / HTML為圖像制作帶圓角的蒙版的最佳方法是什么？ 所以，我需要在矩形圖像中添加圓角。 我想添加像這樣的4個圖形元素 在角落上方的圖像上方隱藏圖像的一些小部分。 例如，紅色用於紅色背景頁面，而元素用於右上角。 這個解決方案的問題是我不能在復雜的背景上使用它，比如漸變或其他非平坦的填充背景。 我知道有一個可以在FireFox中使用的屏蔽功能，但我需要一些更通用的解決方案，也可以在其他瀏覽器中使用。 謝謝。

Answer 1

您應該使用CSS border-radius（如另一個答案中所述）。 它適用於圖像。

以前的答案錯過了你可以在所有瀏覽器中使用CSS支持它，包括IE6 / 7/8使用一個名為CSS3Pie的精彩小黑客。

Answer 2

最好最簡單的方法是使用CSS3 border-radius屬性：

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

它適用於除IE8之外的所有現代瀏覽器（盡管在新的IE9中工作）。

Answer 3

這是很難在一個瀏覽器中找到的東西，更不用說所有常見的瀏覽器了。 我建議你在服務器端進行處理。 如果你正在使用PHP，我知道它有一個內置的圖像庫，可以使用半透明的png。 那是你最好的選擇。 只需“裁剪”一次並將其保存在服務器的文件系統中。 如果您不使用PHP，請查找等效庫。

（通過“裁剪”我的意思是添加圓角與漂亮的alpha混合效果淡入透明背景）。

Answer 4

如果您需要在舊版瀏覽器中使用它，您可以隨時查看使用漂亮的角落 。

或者您可以使用上面提到的css border-radius，並且只接受在IE6 / 7/8中它將是方形的。

Answer 5

jQuery插件lc_roundz應該動態地完成工作 - 即使你希望角落是透明的（例如用於復雜背景，......）。

$("image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
});