firefox img 圆角边框不使用 div 背景

【问题标题】：firefox img rounded borders without using div backgroundfirefox img 圆角边框不使用 div 背景
【发布时间】：2010-10-29 23:32:59
【问题描述】：

-moz-border-radius 对 Firefox 中的图像不起作用，这是一个已知错误。有什么方法可以在不将图像作为背景放在圆形 div 上的情况下获得此功能？

【问题讨论】：

看起来这是在 Firefox 4 上修复的。
不代表不会再用ff3 =[
我认为您必须将其放入某种容器中。看到这个答案：stackoverflow.com/questions/1347796/…

标签： firefox css rounded-corners

【解决方案1】：

在当前的 Firefox 中 you can use SVG filters。有一个像这样的 SVG 文件clip.svg：

<svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
        <svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
    </svg:clipPath>
</svg:svg>

并像这样在 CSS 中应用它：

.target { clip-path: url(clip.svg#c1); }

【讨论】：