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

★CSSリファレンス

mask-origin …… マスク適用の基準位置を指定する
Google Chrome(-webkit-) Safari(-webkit-) Firefox Opera(-webkit-)
広告

mask-originプロパティは、マスク適用の基準位置を指定する際に使用します。

■値

content-box
コンテントボックスに対して相対的に基準位置が決まる
padding-box
パディングボックスに対して相対的に基準位置が決まる(単一のボックスの場合、0 0 はパディングエッジの左上端、100% 100% は右下端となる)
border-box
ボーダーボックスに対して相対的に基準位置が決まる(初期値)
margin-box
マージンボックスに対して相対的に基準位置が決まる
fill-box
オブジェクト境界ボックスに対して相対的に基準位置が決まる
stroke-box
ストローク境界ボックスに対して相対的に基準位置が決まる
view-box
直近のSVGビューポートが参照ボックスとして利用される

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

初期値
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-origin: content-box;
}

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

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

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

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

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

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

HTMLソース

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

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

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

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

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

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

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

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

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

ブラウザ上の表示

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

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

mask-origin: content-box; を指定

mask-origin: padding-box; を指定

mask-origin: border-box; を指定

mask-origin: margin-box; を指定

mask-origin: fill-box; を指定

mask-origin: stroke-box; を指定

mask-origin: view-box; を指定

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

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-origin: content-box;
}

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

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

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

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

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

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

HTMLソース

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

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

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

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

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

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

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

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

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

ブラウザ上の表示

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

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

mask-origin: content-box; を指定

mask-origin: padding-box; を指定

mask-origin: border-box; を指定

mask-origin: margin-box; を指定

mask-origin: fill-box; を指定

mask-origin: stroke-box; を指定

mask-origin: view-box; を指定

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ