-moz-outline-radius

Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

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

En aplicaciones de Mozilla como Firefox, la propiedad CSS -moz-outline-radius puede ser usada para a los contornos de esquinas redondeadas. Un outline es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.

-moz-outline-radius es un atajo para establecer las cuatro propiedades-moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright y -moz-outline-radius-bottomleft.

Valor inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Percentagesas each of the properties of the shorthand:
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
Canonical orderel orden único no-ambigüo definido por la gramática formal

Síntaxis

/* Un valor */
-moz-outline-radius: 25px;

/* Dos valores */
-moz-outline-radius: 25px 1em;

/* Tres valores */
-moz-outline-radius: 25px 1em 12%;

/* Cuator valores */
-moz-outline-radius: 25px 1em 12% 4mm;

/* valores globales */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

Valores

Los contornos elípticos y los valores <porcentaje> se expresan de acuerdo a la síntaxis descrita en border-radius.

Uno, dos,tres o cuatro valores  <outline-radius> , representan uno de los siguientes casos:

<length>
Ver {{ cssxref }} para ver los posibles valores.
<percentage>
Un <percentage>; ver border-radius para más detalles.
  • Si se establece un único valor se aplica a las cuatro esquinas-
  • Si se establecen dos valores, el primero se aplica a la esquina superior-izquierda e inferior-derecha y el segundo a las esquinas superior-derecha e inferior-izquierda
  • Si se establecen tres valores el primero se aplica a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.
  • Si se establecen cautro valores el primero se aplica a la esquina superior-izquierda, el segundo a la esquina superior-derecha, el tercero la esquina inferior-derecha y el cuarto a la esquina inferior-izquierda.

Síntaxis Formal

<outline-radius>{1,4} [ / <outline-radius>{1,4}]?

Ejemplo

HTML

<style>
p {
border: 1px solid black; 
outline: dotted red; -moz-outline-radius: 12% 1em 25px;
}
</style> </head>

<body> <p>La propiedad  outline-style usando -moz-outline-radius</p> </body>

<head> <style>
p1 {
border: 1px solid black; outline: dotted red; 
-moz-outline-radius-topleft: 12%; 
-moz-outline-radius-topright: 1em; 
-moz-outline-radius-bottomright: 35px; 
-moz-outline-radius-bottomleft: 1em; }
</style> </head>

<body> <p1>La propiedad outline-style usando un -moz-outline-radius-xxx más complicado</p1> </body>

Result

Notas

  • Las esquinas con radio dotted o dashed se muestran como solid, bug 382721
  • Existe la posibilidad de que futuras versiones del motor Gecko/Firefox eliminen esta propiedad completamente. Ver bug 315209.

Especificaciones

Esta propiedad no se define es ningún estándar CSS..

Compatibilidad con los distintos navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico No support 1.5 (1.8) No support No support No support
Característica Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Soporte básico No support No support 1.0 (1.8) ? No support No support No support No support

Etiquetas y colaboradores del documento

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