Propriété CSS `mask-border-source`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

La propriété CSS mask-border-source définit l'image source à utiliser pour créer le masque de bordure d'un élément.

C'est la propriété mask-border-slice qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.

Syntaxe

css

/* Valeur avec un mot-clé */
mask-border-source: none;

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

/* Valeurs globales */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;

Valeurs

none: Aucun masque de bordure n'est utilisé.
<image>: Une référence vers une image qu'on utilise pour le masque de la bordure.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `<defs>` et des éléments graphiques
Héritée	non
Valeur calculée	comme défini, mais avec les valeurs `<url>` rendues absolues
Type d'animation	discrète

Syntaxe formelle

mask-border-source = 
  <'border-image-source'>  

<border-image-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>

Exemples

Utilisation simple

Cette propriété ne semble pas encore être prise en charge nulle part. Lorsqu'elle commencera à être prise en charge, elle servira à définir la source du masque de bordure.

css

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

Les navigateurs basés sur Chromium prennent en charge une version obsolète de cette propriété — mask-box-image-source — avec un préfixe :

css

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

Note : La page mask-border propose un exemple fonctionnel (utilisant les propriétés de masque de bordure préfixées obsolètes prises en charge par Chromium), afin que vous puissiez vous faire une idée de l'effet.