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-source は CSS のプロパティで、要素のマスク境界を生成するのに使われる元の画像を設定します。

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報