mask-border-width

構文

/* キーワード値 */
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: revert;
mask-border-width: revert-layer;
mask-border-width: unset;

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

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

値

<length-percentage>

マスク境界の幅を、 <length> または <percentage> で指定します。パーセント値は左右のオフセットについては境界領域の幅に対する相対値、上下のオフセットについては境界領域の高さに対する相対値です。負の数であってはなりません。

<number>

マスク境界の幅を、対応する border-width の倍数で指定します。負の数であってはなりません。

auto

マスク境界の幅は、対応する mask-border-slice の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する border-width が代わりに使用されます。

公式定義

形式文法

mask-border-width = 
  <'border-image-width'>  

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

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

例

基本的な使用

mask-border-width は、境界マスクの幅を定義します。このプロパティを mask-border-slice と異なる値に設定すると、スライスは境界マスクに合わせて拡大縮小されます。

/* 最終的なマスクは幅 20px に縮小 */
mask-border-slice: 30 fill;
mask-border-width: 20px;

Chromium ベースのブラウザーは、このプロパティの古い版 — mask-box-image-width — に接頭辞つきで対応しています。

-webkit-mask-box-image-width: 20px;

仕様書

ブラウザーの互換性

関連情報

• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source