mask-border-outset

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

mask-border-outset は CSS のプロパティで、要素のマスク境界の境界ボックスからの距離を指定します。

構文

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

/* <number> 値 */
mask-border-outset: 1.5;

/* 上下 | 左右 */
mask-border-outset: 1 1.2;

/* 上 | 左右 | 下 */
mask-border-outset: 30px 2 45px;

/* 上 | 右 | 下 | 左 */
mask-border-outset: 7px 12px 14px 5px;

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

mask-border-outset プロパティは 1 ～ 4 つの値で指定します。それぞれの値は <length> または <number> です。負の値は無効です。

  • 位置が 1 つ指定された場合、全 4 辺に同じ距離が適用されます。
  • 位置が 2 つ指定された場合、1 つ目の距離は上下に、2 つ目は左右に適用されます。
  • 位置が 3 つ指定された場合、1 つ目の距離はを上に、2 つ目は左右に、3 つ目は下に適用されます。
  • 位置が 4 つ指定された場合、上、右、下、左の順 (時計回り) で適用されます。

値

<length>

マスク境界の辺からの距離を長さで表します。

<number>

マスク境界の辺からの距離を、対応する border-width の倍数で表します。

公式定義

初期値0
適用対象すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類離散値

形式文法

mask-border-outset = 
  [ <length> | <number> ]{1,4}

例

基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。

css
mask-border-outset: 1rem;

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

css
-webkit-mask-box-image-outset: 1rem;

メモ: mask-border ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書

Specification
CSS Masking Module Level 1
# the-mask-border-outset

ブラウザーの互換性

BCD tables only load in the browser

関連情報