mask-border

Limited availability

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

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

構成要素のプロパティ

このプロパティは以下の 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'>

<mask-border-source> =
none |
<image>

<mask-border-slice> =
[ <number> | <percentage> ]{1,4} fill?

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

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

<mask-border-repeat> =
[ stretch | repeat | round | space ]{1,2}

<mask-border-mode> =
luminance |
alpha

<image> =
<url> |
<gradient>

<length-percentage> =
<length> |
<percentage>

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

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

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

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

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

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

仕様書

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

ブラウザーの互換性

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

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.

関連情報