如何给图像提供两个圆角？

Question

有没有一种方法可以使用javascript将图像裁剪为特定形状？

Answer 1

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

即使使用非标准的-moz-border-radius属性，它也无法在FF v3.x上运行。 我没有Windows可以测试，但是根据此页面，它应该可以在IE9上运行。

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

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

Answer 2

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

您的图像模具具有透明的形状，类似于您想要的形状，带有两个圆角的矩形。 模具的其余部分构成框架区域。

您显示图像，然后显示图像模具。