Javascript 将圆角添加到矩形光栅图像

使用CSS/JS/HTML为图像制作圆角遮罩的最佳方法是什么？因此，我需要在矩形图像中添加圆角。我考虑在图像的四角添加4个类似的图形元素，以隐藏图像的一些小部分。例如，这里红色用于红色背景页面，元素用于右上角。这个解决方案的问题是，我不能在复杂的背景上使用它，比如渐变或其他非平面填充背景。

---

我知道FireFox中有一个屏蔽功能，但我需要一些更通用的解决方案，也可以在其他浏览器中使用。谢谢。

最好、最简单的方法是使用CSS3

边界半径属性：

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

它适用于除IE8之外的所有现代浏览器（但适用于新的IE9）。
这在一个浏览器中很难做到，更不用说所有普通浏览器了。我建议您在服务器端进行处理。如果您使用PHP，我知道它有一个内置的图像库，可以使用半透明的png。那是你最好的选择。只需“裁剪”一次并将其保存在服务器的文件系统中。如果不使用PHP，请查找等效的库

（我所说的“裁剪”是指将圆角添加到透明背景中，并具有良好的alpha混合效果）。
如果需要，也可以在较旧的浏览器中使用

或者您可以使用上面提到的css边框半径，只需接受在IE6/7/8中它将是正方形。
您应该为此使用css边框半径（如另一个答案中所述）。它确实适用于图像

前面的答案没有提到的是，您可以在所有浏览器中使用CSS支持它，包括IE6/7/8，使用一个名为的很棒的小技巧。
jQuery插件lc_roundz应该动态完成这项工作-即使您希望角落透明（例如，用于复杂背景，…）

您必须支持哪些浏览器？有一些CSS解决方案适用于大多数现代浏览器，但如果你也需要IE6/7，它们可能无法工作。事实上，我认为我现在不能在这个项目中使用CSS3功能，因为我需要不同的浏览器支持它，包括IE6，如果IE8不支持它，你怎么能说所有的现代浏览器都支持它呢？IE8不是很久以前发布的，可以被看作是相当现代的。另外，IE7是如何处理的？我想知道如果你给一个div圆角，使它比包含的图像稍微小一点，会发生什么。也许在玩溢出属性。。。它可能会产生正确的效果。@Sergey，如果您使用www.css3pie.com？它为旧版IE应用程序提供了css3技巧：（1）实际上，它可以处理图像，至少在Chrome中是这样。（2） -如果有些浏览器有直角，那就这样吧：p（3）我说过它适用于除IE8之外的所有现代浏览器。
$("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  
});