【CSS Modules】mask-border-outsetプロパティの使い方

mask-border-outsetプロパティは、CSSのマスク機能において、マスク境界の画像が要素の境界ボックスから外側にはみ出して描画される量を保持するプロパティです。このプロパティは、mask-borderショートハンドプロパティの一部として使われることが多く、要素の視覚的なマスクをカスタマイズする際に重要な役割を果たします。

具体的には、mask-border-outsetは、マスク画像の角や辺が、要素のコンテンツやパディング、ボーダーなどの通常のボックスモデルの外側へどれだけ拡張されるかを指定します。値には、ピクセル（px）やemなどの単位を持つ長さ、または数値（border-image-outsetと同様の動作）を指定できます。数値の場合、それはmask-border-widthの値に対する乗数として解釈されます。

値を指定する方法は複数あります。もし1つの値を指定した場合、それは上下左右すべての辺に対して均等に適用されます。2つの値を指定した場合、1つ目の値は上下の辺に、2つ目の値は左右の辺に適用されます。3つの値を指定した場合、1つ目の値は上辺、2つ目の値は左右の辺、3つ目の値は下辺に適用されます。そして、4つの値を指定した場合、それぞれ上辺、右辺、下辺、左辺の順に適用され、各辺に異なるはみ出し量を設定することが可能です。

このプロパティは、特に複雑なUIデザインや、装飾的なボーダー効果を持つマスクを適用したい場合に役立ちます。例えば、画像の一部をマスクとして使い、そのマスクが要素の実際の境界よりも少し外側まで広がるように見せたいときなどに利用されます。これにより、より豊かな視覚表現を実現できます。

Copy
1mask-border-outset: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません