web-dev-qa-db-ja.com

CSSのクリップパスインセットがchromeで機能しない

CSSプロパティ clip-path ですが、Invalid property value Chromeのエラー。

screenshot

ここに小さなデモがあります：

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

Clip Path Example

注：これは clip-pathはchromeでは機能しません に関するこの質問とは異なります。 CSSではなくSVGを使用してクリップパスを適用する

Can I Useによると、それは chromeで動作するはずです です。

htmlcssclip-path
16
KyleMit

-webkit-プレフィックスが必要であることがわかりました（ただし、この ベンダープレフィックス のリストには表示されません）。

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

Chrome 55の時点で更新、ベンダープレフィックスのないクリップパスがサポートされるようになりましたが、他の多くのブラウザでは-webkit-clip-pathを使用する必要があるため、安全ですとりあえず含めます。

CanIUse （2017年時点）のスナップショットを次に示します。部分的なサポートブラウザーの右上隅にある追加の詳細は、-webkit-接頭辞

Can I Use Snaptshot

さらに読む：

29
KyleMit