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: revert-layer;
mask-border-source: unset;
値
公式定義
形式文法
mask-border-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
基本的な使用
このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのソースを定義する役割を果たすことになります。
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 |
ブラウザーの互換性
Loading…