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-outsetCSS のプロパティで、要素のマスク境界の境界ボックスからの距離を指定します。

構文

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border-outset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

関連情報