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 inicial | as each of the properties of the shorthand: |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Percentages | as each of the properties of the shorthand: |
| Media | visual |
| Valor calculado | as each of the properties of the shorthand:
|
| Animatable | as each of the properties of the shorthand: |
| Canonical order | el 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
<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>; verborder-radiuspara 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 dottedodashedse 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 |