-webkit-box-reflect

Resumen

La propiedad CSS -webkit-box-reflect peermite reflejar el contenido del elemento en una dirección específica.

Síntaxis

/* Valores para la dirección */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* Valor del desplazamiento */
-webkit-box-reflect: below 10px;

/* Valor de máscara */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Valores globales */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;

Valores

above, below, right, left

Son palabras clave que indican en qué dirección se realiza la reflexión.

<length>

Indica el tamaño de la reflexión.

<image>

Describe la máscara que se aplicará a la reflexión.

Síntaxis Formal

[ above | below | right | left ]? <length>? <image>?
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | [ <length> | <percentage> ]{2}
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?

Especificaciones

Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función element().

Compatibilidad con los distintos navegadores

Ver además

• La documentación de Apple.
• La especificación de Webkit.
• El artículo de Lea Verou sobre reflexión usando  característica CSS que están en el estándar.