Firefox IMG округлые границы без использования фона Div

Question

Это известная ошибка, что -moz-border-radius не работает с изображениями в Firefox. Как можно получить эту функциональность, не прибегая к изображению в качестве фона на округленном элементе div?

Answer 1

В текущем Firefox вы можете использовать фильтры SVG .Создайте файл 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); }