★CSSリファレンス

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=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-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>

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=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-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>