★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=”https://www.htmq.com/wp-content/themes/htmq/htmq-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=”https://www.htmq.com/wp-content/themes/htmq/htmq-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; を指定

広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
63 users signed up
もっと表示する