mask-border-source

Limited availability

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

mask-border-sourceCSS のプロパティで、要素のマスク境界を生成するのに使われる元の画像を設定します。

mask-border-slice プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。

構文

css
/* キーワード値 */
mask-border-source: none;

/* <image> 値 */
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

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

none

マスク境界は使用されません。

<image>

マスク境界に使用する画像への参照です。

公式定義

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

形式文法

mask-border-source = 
none |
<image>

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのソースを定義する役割を果たすことになります。

css
mask-border-source: url(image.jpg);

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

css
-webkit-mask-box-image-source: url(image.jpg);

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

仕様書

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

ブラウザーの互換性

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-source

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.

関連情報