向矩形光栅图像添加圆角答案

【问题标题】：Add rounded corners to a rectangle raster image向矩形光栅图像添加圆角
【发布时间】：2011-04-15 02:42:54
【问题描述】：

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

【问题讨论】：

您必须支持哪些浏览器？有一些 CSS 解决方案适用于大多数现代浏览器，但如果您还需要 IE6/7，它们可能无法正常工作..

标签： javascript html css image transparency

【解决方案1】：

您应该为此使用 CSS 边框半径（如另一个答案中所述）。它确实适用于图像。

之前的答案遗漏的是，您可以在所有浏览器中使用 CSS 支持它，包括 IE6/7/8，使用名为 CSS3Pie 的精彩小技巧。

【讨论】：

【解决方案2】：

最好和最简单的方法是使用 CSS3 border-radius 属性：

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

它适用于除 IE8 之外的所有现代浏览器（但适用于新的 IE9）。

【讨论】：

实际上，我认为我现在不能在这个项目中使用 CSS3 功能，因为我需要它被包括 ie6 在内的不同浏览器支持
如果 IE 8 不支持这个，你怎么能说所有现代浏览器都支持它呢？ IE8 不是很久以前发布的，可以看作是相当现代的。另外，IE7 是如何处理这个问题的？
我想知道如果你给一个 div 圆角并使它比包含的图像略小会发生什么。也许玩溢出属性......它可能会产生正确的效果。
@Sergey，如果你使用 www.css3pie.com ？它为旧版 IE 启用 css3 技巧
回复：(1) 实际上它确实适用于图像，至少在 Chrome 中。 (2) dowebsitesneedtolookexactlythesameineverybrowser.com - 如果某些浏览器有方角，那就这样吧:p (3) 我说过它适用于所有现代浏览器除了 IE8。

【解决方案3】：

这在一个浏览器中很难做到，更不用说所有常见的浏览器了。我建议您在服务器端进行处理。如果您正在使用 PHP，我知道它有一个内置的图像库，可以使用半透明的 png。那是你最好的选择。只需“裁剪”一次并将其保存在服务器的文件系统中。如果您不使用 PHP，请寻找等效的库。

（我所说的“裁剪”是指添加具有良好 alpha 混合效果的圆角，淡入透明背景）。

【讨论】：

【解决方案4】：

如果您还需要在旧版浏览器中使用 nifty corners，您可以随时考虑使用它。

或者您可以使用上面提到的 css 边框半径，并接受在 IE6/7/8 中它将是方形的。

【讨论】：

【解决方案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  
});

【讨论】：