-webkit-mask-box-image

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

-webkit-mask-box-image establece la imagen de máscara para la caja del borde de un elemento.

Síntaxis

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]

Where:

<mask-box-image>
<uri> | <gradient> | none
<top> <right> <bottom> <left>
<length> | <percentage>
<x-repeat> <y-repeat>
repeat | stretch | round

Valores

<uri>
La localización del recurso imagen que será usada como imagen de máscara..
<gradient>
La función -webkit-gradient que se usará como imagen de máscara.
none
Para especificar que la caja del borde no va a tener imagen de máscara.
<length>
El tamaño del desplazamiento de la imagen de máscara. Ver  <length> para posibles unidades.
<percentage>
El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.
repeat
La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja.  Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.
stretch
La imagen de máscara se encoge para contener la caja del borde exactamente.
round
 Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.

Ejemplos

.exampleone {
    -webkit-mask-box-image: url('mask.png');
}

.exampletwo {
    -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
}

Compatibilidad con los distintos navegadores

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

Ver además

-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-clip,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat

Etiquetas y colaboradores del documento

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