将圆角添加到矩形栅格图像

Question

使用CSS / JS / HTML为图像制作带圆角的蒙版的最佳方法是什么？所以，我需要在矩形图像中添加圆角。我想在图像上方的角上添加4个像这样的图形元素来隐藏图像的一些小部分。例如，红色用于红色背景页面，而元素用于右上角。这个解决方案的问题是我不能在复杂的背景上使用它，比如渐变或其他非平坦的填充背景。 我知道有一个可以在FireFox中使用的屏蔽功能，但我需要一些更通用的解决方案，也可以在其他浏览器中使用。感谢。

Answer 1

你应该使用CSS border-radius（如另一个答案中所述）。它适用于图像。

之前的答案错过了你可以在所有浏览器中使用CSS支持它，包括使用名为CSS3Pie的精彩小黑客在IE6 / 7/8中。

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

如果您需要使用nifty corners，也可以使用它来在旧版浏览器中使用。

或者你可以使用上面提到的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  
});