如何将图像赋予两个圆角？

Question

有没有办法使用javascript将图像裁剪为特定形状？

Answer 1

在border-radius元素上使用img适用于Safari v5，Chrome v8和FF v4b。这是一个例子：http://jsfiddle.net/GXNVF/2/

即使使用非标准-moz-border-radius属性，它也无法在FF v3.x上运行。我没有Windows进行测试，但根据this page，它应该适用于IE9。

编辑：这是一个更新示例，基于@ Spudley的观点，显示使用背景图像可以使其在FF v3.x中运行： http://jsfiddle.net/GXNVF/3/

此外，根据@Spudley，您可以使用CSS3Pie使其适用于IE6-8。 （这使用IE的CSS行为，并要求您添加一个额外的CSS规则并托管他们在您的网站上提供的htc文件。）

Answer 2

如果使用图像模板，可能会更容易。

您的图像模板具有与您所寻找的透明形状相同的透明形状，具有两个圆角的矩形。模板的其余部分构成了框架区域。

显示图像，然后显示图像模板。