html - CSS の Clip-Path Inset が chrome で機能しない

Question

CSS プロパティを使用しようとしてclip-pathいInvalid property valueますが、Chrome でエラーが発生します。

スクリーンショット

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

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

注: これは、SVG (CSS ではなく) を使用してクリップパスを適用する方法について具体的に尋ねているため、clip-path does not work with chromeに関するこの質問とは異なります。

score 29 · Accepted Answer

プレフィックスが必要だったことが判明しました（ただし、このベンダープレフィックス-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の更新では、ベンダープレフィックスのない clip-path がサポートされるようになりましたが、他の多くのブラウザーではまだ使用が必要-webkit-clip-pathなため、現時点では含める方が安全です。

これはCanIUseのスナップショット(2017 年現在) で、部分的にサポートされているブラウザーの右上隅に追加の詳細が表示され、多くの場合、-webkit-プレフィックスの必要性が示されています。

さらに読む：

1 に答える 1