Clip-Path Inset in CSS funktioniert nicht in Chrom

Question

Ich versuche, die CSS-Eigenschaft clip-path zu verwenden, aber ich bekomme eine Invalid property value Fehler in Chrome.

Hier ist eine kleine Demo:

.clip-me { 
 
    clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */ 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Hinweis: Das von dieser Frage auf clip-path does not work with chrome anders, weil es spezifisch ist Verbündeter fragt nach, wie Clip-Pfad mit SVG (nicht CSS)

anwenden kann, je nach kann ich es verwenden should work in chrome.

Answer 1

Stellt sich heraus, ich brauchte nur den -webkit- Präfix (obwohl ich sehe es nicht in dieser Liste der vendor prefixes)

.clip-me {   /* top, right, bottom, left */ 
 
    -webkit-clip-path: inset(0px 50px 50px 0px); 
 
      clip-path: inset(0px 50px 50px 0px); 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Ergänzung vom Chrome 55, clip -path ohne das Hersteller-Präfix wird jetzt unterstützt, aber viele andere Browser benötigen immer noch -webkit-clip-path, so dass es sicherer ist, es für jetzt zu integrieren.

Hier ist ein Schnappschuss von CanIUse (Stand 2017), mit den zusätzlichen Details in der rechten oberen Ecke des Teil Unterstützung Browser die Notwendigkeit für den -webkit- Präfix

Weiterführende Literatur oft anzeigt:

• Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
• Using clip-path