-webkit-box-reflect

No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Resumen

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

Nota: Esta característica no está pensada para ser usada en páginas Web .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS element() .

Valor inicialnone
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

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

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico No support 4.0 No support 15.0 4.0
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte básico No support 2.1 No support 22.0 (Yes) 3.2 (Yes)

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,