Warum funktioniert die folgende CSS-Regel nicht?

Question

Ich habe ein Bild in meinem Markup:

<img src="http://img-url/img.jpg" /> 

Das ist mein CSS:

img { 
    clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%) fill-box; 
} 

Es funktioniert, wenn ich den fill-box Teil zu entfernen. Also, verwende ich es falsch? Die Syntax von MDN scheint zu sein:

<clip-source> | [ <basic-shape> || <geometry-box> ] | none 
where 
<clip-source> = <url> 
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> 
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box 

Link zur Immobilie: https://developer.mozilla.org/en/docs/Web/CSS/clip-path

Bin ich ihn nicht richtig? Was muss ich ändern?

Answer 1

Der Grund ist, dass Browser die Funktionalität, die Sie gerade verwenden, nicht unterstützen.

Die MDN-Dokumente, auf die Sie verwiesen haben, sind gut, erklären aber nicht wirklich die Position der Browserunterstützung, obwohl der Artikel mit der Warnung beginnt, dass es sich immer noch um "experimentelle Technologie" handelt.

WebPlatform ist eine weitere gute Referenz, und seine docs for clip-path nicht einmal erwähnen, Fill-Box.

Sie können auch feststellen, dass die unterstützte Syntax für Clipping innerhalb von SVGs im Vergleich zu regulären HTML-Elementen innerhalb des gleichen Browsers unterschiedlich ist. Insbesondere sind Füllung und Kontur SVG-Eigenschaften, so dass die Verwendung von fill-box oder stroke-box in einem HTML-Kontext sinnvoll sein kann oder nicht.

Die Browser-Unterstützung für diese Edge-Case-Syntax kann sich im Laufe der Zeit verbessern, aber im Moment ist die beste Option, die ich vorschlagen kann, die Syntax auf die aktuellen Browser zu reduzieren.

Answer 2

korrekte Syntax ist

 
`img { 
    clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%); 
}` 

oder

 
`img { 
    clip-path: fill-box; 
}` 

weil fill-Box ist Schlüsselwort Wert. wenn Sie WebKit verwenden basierten Browsern

 
`img { 
    -webkit-clip-path: fill-box; 
}` 

Answer 3

versuchen Wenn Sie the compatibility chart gehen, sehen Sie, Sie könnten Anbieter-Präfixe müssen. Wenn Sie Chrome oder Firefox verwenden, müssen Sie -web-kit-clip-path verwenden.