これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSmask-border-width プロパティは、要素のマスク境界の幅を設定します。

Syntax

/* キーワード値 */
mask-border-width: auto;

/* <length> 値 */
mask-border-width: 1rem;

/* <percentage> 値 */
mask-border-width: 25%;

/* <number> 値 */
mask-border-width: 3;

/* 上下 | 左右 */
mask-border-width: 2em 3em;

/* 上 | 左右 | 下 */
mask-border-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
mask-border-width: 5% 2em 10% auto;

/* グローバル値 */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: unset;

mask-border-width プロパティは、以下の値のリストの中から1~4つの値を使って指定することができます。

  • 値が1つ指定された場合、全四辺に同じマージンが適用される。
  • 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
  • 値が3つ指定された場合、1つ目のマージンは、2つ目は左右、3つ目はの辺に適用される。
  • 値が4つ指定された場合、マージンはそれぞれの順 (時計回り) に適用される。

<length-percentage>
マスク境界の幅を、 <length> または <percentage> で指定します。パーセント値は左右のオフセットについては境界領域のに対する相対値、上下のオフセットについては境界領域の高さに対する相対値です。負の数であってはなりません。
<number>
マスク境界の幅を、対応する border-width の倍数で指定します。負の数であってはなりません。
auto
マスク境界の幅は、対応する mask-border-slice の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する border-width が代わりに使用されます。

形式文法

[ <length-percentage> | <number> | auto ]{1,4}

where
<length-percentage> = <length> | <percentage>

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-border-width の定義
勧告候補 初回定義

初期値auto
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
パーセンテージrelative to width/height of the mask border image area
メディア視覚
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

TBD

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,