トップページ  > CSS  > mask-clip

★CSSリファレンス

mask-clip …… マスク適用の範囲を指定する
Google Chrome(-webkit-) Safari(-webkit-) Firefox Opera(-webkit-)
広告

mask-clipプロパティは、マスク適用の範囲を指定する際に使用します。

■値

content-box
コンテントボックスが適用範囲とされる
padding-box
パディングボックスが適用範囲とされる
border-box
ボーダーボックスが適用範囲とされる(初期値)
margin-box
マージンボックスが適用範囲とされる
fill-box
オブジェクト境界ボックスが適用範囲とされる
stroke-box
ストローク境界ボックスが適用範囲とされる
view-box
直近のSVGビューポートが参照ボックスとして利用される
no-clip
範囲が規定されない

■初期値・適用対象・値の継承

初期値
border-box
適用対象
すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

.sample0, .sample1, .sample2, .sample3, .sample4, .sample5, .sample6, .sample7, .sample8 {
width:80px; height:40px;
margin:10px; padding:10px;
background-color: pink;
border: 30px solid red;
}

div.sample1 {
mask-image: url('images/maru20.png');
mask-clip: content-box;
}

div.sample2 {
mask-image: url('images/maru20.png');
mask-clip: padding-box;
}

div.sample3 {
mask-image: url('images/maru20.png');
mask-clip: border-box;
}

div.sample4 {
mask-image: url('images/maru20.png');
mask-clip: margin-box;
}

div.sample5 {
mask-image: url('images/maru20.png');
mask-clip: fill-box;
}

div.sample6 {
mask-image: url('images/maru20.png');
mask-clip: stroke-box;
}

div.sample7 {
mask-image: url('images/maru20.png');
mask-clip: view-box;
}

div.sample8 {
mask-image: url('images/maru20.png');
mask-clip: no-clip;
}

HTMLソース

<p>
マスクを指定しない状態のdiv要素<br>
<div class="sample0"></div>
</p>

<p>
マスクレイヤーとして使用する画像<br>
<img src="images/maru20.png">
</p>

<p>
mask-clip: content-box; を指定<br>
<div class="sample1"></div>
</p>

<p>
mask-clip: padding-box; を指定<br>
<div class="sample2"></div>
</p>

<p>
mask-clip: border-box; を指定<br>
<div class="sample3"></div>
</p>

<p>
mask-clip: margin-box; を指定<br>
<div class="sample4"></div>
</p>

<p>
mask-clip: fill-box; を指定<br>
<div class="sample5"></div>
</p>

<p>
mask-clip: stroke-box; を指定<br>
<div class="sample6"></div>
</p>

<p>
mask-clip: view-box; を指定<br>
<div class="sample7"></div>
</p>

<p>
mask-clip: no-clip; を指定<br>
<div class="sample8"></div>
</p>
↓↓↓

ブラウザ上の表示

マスクを指定しない状態のdiv要素

マスクレイヤーとして使用する画像

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; を指定

■ベンダープレフィックスを付けた場合の使用例

CSSソースは外部ファイル(sample.css)に記述

.prefix_sample0, .prefix_sample1, .prefix_sample2, .prefix_sample3, .prefix_sample4, .prefix_sample5, .prefix_sample6, .prefix_sample7, .prefix_sample8 {
width:80px; height:40px;
margin:10px; padding:10px;
background-color: pink;
border: 30px solid red;
}

div.prefix_sample1 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: content-box;
}

div.prefix_sample2 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: padding-box;
}

div.prefix_sample3 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: border-box;
}

div.prefix_sample4 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: margin-box;
}

div.prefix_sample5 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: fill-box;
}

div.prefix_sample6 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: stroke-box;
}

div.prefix_sample7 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: view-box;
}

div.prefix_sample8 {
-webkit-mask-image: url('images/maru20.png');
-webkit-mask-clip: no-clip;
}

HTMLソース

<p>
マスクを指定しない状態のdiv要素<br>
<div class="prefix_sample0"></div>
</p>

<p>
マスクレイヤーとして使用する画像<br>
<img src="images/maru20.png">
</p>

<p>
mask-clip: content-box; を指定<br>
<div class="prefix_sample1"></div>
</p>

<p>
mask-clip: padding-box; を指定<br>
<div class="prefix_sample2"></div>
</p>

<p>
mask-clip: border-box; を指定<br>
<div class="prefix_sample3"></div>
</p>

<p>
mask-clip: margin-box; を指定<br>
<div class="prefix_sample4"></div>
</p>

<p>
mask-clip: fill-box; を指定<br>
<div class="prefix_sample5"></div>
</p>

<p>
mask-clip: stroke-box; を指定<br>
<div class="prefix_sample6"></div>
</p>

<p>
mask-clip: view-box; を指定<br>
<div class="prefix_sample7"></div>
</p>

<p>
mask-clip: no-clip; を指定<br>
<div class="prefix_sample8"></div>
</p>
↓↓↓

ブラウザ上の表示

マスクを指定しない状態のdiv要素

マスクレイヤーとして使用する画像

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; を指定

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ