CSS'de çalışmayan Clip-Path Inset

Question

CSS özelliğini clip-path kullanmaya çalışıyorum, ancak Chrome'da Invalid property value hatası alıyorum. belirli çünkü, bu clip-path does not work with chrome bu soruya farklıdır:

.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">

Not: Burada

küçük demo SVG (CSS değil) kullanarak klip yolunu nasıl uygulayacağınız konusunda endişe duyabilirim.

Can I Use, Use should work in chrome.

Answer 1

, klip itibariyle

.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">

Güncelleme Krom 55 (I vendor prefixes bu listede görmüyorum rağmen) Ben sadece -webkit- önek gerekli çıkıyor - satıcı öneki olmadan destek artık destekleniyor, ancak diğer birçok tarayıcı hala -webkit-clip-path'u kullanmayı gerektiriyor. İşte

CanIUse kısa bir özetini aşağıda, (2017 itibariyle) kısmi destek tarayıcıların sağ üst köşesinde ek ayrıntılar genellikle -webkit- öneki

Ayrıntılı Okuma ihtiyacını belirten ile:

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