CSS3

プロパティ

mask

  編集:2022.07.14 by T.A.

[Edge]⛌。→mdn(en)mdn

マスク: 略式プロパティ

名前 mask
<mask-layer>#
初期値 個々のプロパティを見よ
適用対象 mask-image と同じ
継承 されない
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 個々のプロパティを見よ
<mask-layer>
<mask-reference>
|| <position> [ / <bg-size> ]?
|| <repeat-style>
|| <geometry-box>
|| [ <geometry-box> | no-clip ]
|| <compositing-operator>
|| <masking-mode>
<geometry-box>
<shape-box> | fill-box | stroke-box | view-box
<shape-box>
<box> | margin-box
margin-box
要素のマージンボックス。

【この値は mask-clipmask-origin には許容されない(課題 #5)。】

fill-box
要素のオブジェクト限界ボックス。
stroke-box
要素の stroke 限界ボックス。
view-box
要素に最も近い SVG 表示域が成すボックス ― SVG 表示域を作成している要素用に viewBox 属性が指定されているならば:

【viewBox が指定されていない場合にどうなるかは、述べられていない。】

<mask-layer> 値を成す各成分は、在るならば,次の対応関係の下で 各種 mask-* 下位プロパティを設定する:

プロパティ 成分
mask-image <mask-reference>
mask-position <position>
mask-size <bg-size>
mask-repeat <repeat-style>
mask-origin 1 個目の <geometry-box>
mask-clip 2 個目の <geometry-box>、または no-clip ― ただし、どちらも無い場合は 1 個目の <geometry-box>(それが mask-origin、mask-clip とも設定する)。
mask-composite <compositing-operator>
mask-mode <masking-mode>

<mask-reference> が MASK 要素を参照する場合、[mask-repeat/mask-position/mask-clip/mask-origin/mask-size]のプロパティの使用値による効果は生じさせないものとする。この事例では、MASK 要素がマスク層画像の[位置、サイズ法、切り抜き]を定義する。

mask 略式は、mask-border も その初期値に設定し直す【したがって、その下位プロパティたちも初期値に設定し直す】。したがって作者には、[カスケード内で先に現れるマスク設定群を上書きする]ときには ― 他の略式や個々のプロパティよりも ― mask 略式を利用することが推奨される。そうすれば、[新たなスタイルの効果が生じるよう、mask-border を設定し直す]ことも確保されるので。


テスト
HTML:

ここに表示
¶[Edge]✖?
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: