mask-border

mask-border は CSS の一括指定プロパティで、要素の境界の縁に沿ったマスクを生成することができます。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

値

<'mask-border-source'>

ソース画像です。mask-border-source を参照してください。

<'mask-border-slice'>

ソース画像を複数の領域に分割する幅です。mask-border-slice を参照してください。

<'mask-border-width'>

境界画像の幅です。4 つまでの値を指定することができます。mask-border-width を参照してください。

<'mask-border-outset'>

要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。mask-border-outset を参照してください。

<'mask-border-repeat'>

ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。mask-border-repeat を参照してください。

<'mask-border-mode'>

ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。mask-border-mode を参照してください。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
パーセント値一括指定の次の各プロパティとして
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして
重ね合わせコンテキストの生成あり

形式文法

mask-border = 
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>

例

ビットマップに基づいたマスク境界の設定

この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。

一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は round であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報