-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é -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.
/* 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-box-reflect: unset;
Attention :
Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard element().
Syntaxe
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>-
La taille du reflet créé, cf.
<length>sur les valeurs possibles. <image>-
Le masque à appliquer au reflet, cf.
<image>sur les valeurs possibles.
Syntaxe formelle
Spécifications
Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard element().
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Compatibilité des navigateurs
Voir aussi
- La documentation Apple
- La spécification WebKit
- L'article de Lea Verou sur les réflexions CSS en utilisant les fonctionnalités en voie de standardisation