-webkit-box-reflect
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété CSS -webkit-box-reflect peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.
Syntaxe
/* Valeurs de directions */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
/* Valeurs incluant un décalage */
-webkit-box-reflect: below 10px;
/* Valeur de masque */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* Valeurs globales */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-box-reflect: unset;
Valeurs
above,below,right,left-
Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).
<length>-
Indique la taille du reflet créé.
<image>-
Décrit le masque à appliquer au reflet.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
-webkit-box-reflect =
[ above | below | right | left ]? <length>? <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>
Spécifications
Cette propriété ne fait partie d'aucun standard, mais on pourra utiliser la fonction CSS standardisée element().
Compatibilité des navigateurs
Voir aussi
- La documentation (angl.) de Apple.
- La spécification (angl.) de WebKit.