mask-clip
は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。
/* <geometry-box> 値 */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* キーワード値 */
mask-clip: no-clip;
/* 標準外のキーワード値 */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;
/* 複数の値 */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* グローバル値 */
mask-clip: inherit;
mask-clip: initial;
mask-clip: unset;
初期値 | border-box |
---|---|
適用対象 | すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
構文
1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。
値
content-box
- 描画されるコンテンツは、コンテンツボックスでクリッピングされます。
padding-box
- 描画されるコンテンツは、パディングボックスでクリッピングされます。
border-box
- 描画されるコンテンツは、境界ボックスでクリッピングされます。
margin-box
- 描画されるコンテンツは、マージンボックスでクリッピングされます。
fill-box
- 描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。
stroke-box
- 描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。
view-box
- 直近の SVG ビューポートを参照ボックスとして使用します。
viewBox
属性が SVG ビューポートを作成している要素に指定されると、参照ボックスはviewBox
属性で示された座標系の原点に配置され、参照ボックスの寸法はviewBox
属性の幅と高さに設定されます。 no-clip
- 描画されるコンテンツはクリッピングされません。
border
- このキーワードは
border-box
と同じ動作をします。 padding
- このキーワードは
padding-box
と同じ動作をします。 content
- このキーワードは
content-box
と同じ動作をします。 text
- このキーワードは要素のテキストでマスク画像をクリッピングします。
形式文法
[ <geometry-box> | no-clip ]#where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
例
CSS
#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 20px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-size: 100% 100%;
mask-clip: border-box; /* Can be changed in the live sample */
}
HTML
<div id="masked">
</div>
<select id="clipBox">
<option value="content-box">content-box</option>
<option value="padding-box">padding-box</option>
<option value="border-box" selected>border-box</option>
<option value="margin-box">margin-box</option>
<option value="fill-box">fill-box</option>
<option value="stroke-box">stroke-box</option>
<option value="view-box">view-box</option>
<option value="no-clip">no-clip</option>
</select>
JavaScript
var clipBox = document.getElementById("clipBox");
clipBox.addEventListener("change", function (evt) {
document.getElementById("masked").style.maskClip = evt.target.value;
});
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 mask-clip の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。