CSS clip-path 属性
定義と使用方法
clip-path 属性を使用して、要素を基本形状または SVG 源にカットアウトできます。
注釈：clip-path は廃止された clip 属性に取って代わります。
CSS 语法
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
属性値
| 値 | 説明 |
|---|---|
| clip-source | SVG <clipPath> 要素への URL を指定します。 |
| basic-shape | 要素を基本形状（円、楕円、多角形、または星形）にカットアウトします。 |
| margin-box | マージンボックスを使用して参照ボックスとして使用します。 |
| border-box | ボーダーボックスを使用して参照ボックスとして使用します。 |
| padding-box | パディングボックスを使用して参照ボックスとして使用します。 |
| content-box | コンテンツボックスを使用して参照ボックスとして使用します。 |
| fill-box | オブジェクト境界ボックスを使用して参照ボックスとして使用します。 |
| stroke-box | ストローク境界ボックスを使用して参照ボックスとして使用します。 |
| view-box | SVG ビューポートを使用して参照ボックスとして使用します。 |
| none | デフォルト値。剪切パスは作成されません。 |
技術的詳細
| デフォルト値： | none |
|---|---|
| 継承： | いいえ |
| アニメーション制作： | サポート（basic-shape 値のみ）。参照してください：アニメーション関連属性。 |
| バージョン： | CSS Masking Module Level 1 |
| JavaScript 语法： | object.style.clipPath="circle(50%)" |
ブラウザのサポート
テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
* Edge は SVG 要素（HTML 要素はサポートしていません）上でのみ clip-path をサポートしています。
