CSS: border-radius and -moz-border-radius
1. Definition and syntax for border-radius
Como ocurre con muchas propiedades CSS relativas a los márgenes, el relleno y las fronteras, hay cuatro propiedades individuales, uno por cada esquina de un elemento de cuadro-y una propiedad resumida. Cada uno de los atributos de esquina aceptará uno o dos valores. La propiedad border-radius aceptará un máximo de dos valores en los navegadores WebKit y hasta ocho ahora en Firefox 3.5.
Aquí están los CSS y los atributos específicos de navegador en cuestión:
| CSS3 | Mozilla equivalent | WebKit equivalent |
|---|---|---|
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
| border-radius | -moz-border-radius | -webkit-border-radius |
Antes de estas propiedades de CSS3 IE9 no funciona en Internet Explorer. Los 'Mozilla' versiones embargo, trabaja muy bien en Firefox y otros navegadores basados en Mozilla y el 'WebKit' que están en Safari y Chrome, así como el iPad iPhone /.
Cada una de las esquinas individuales propiedades de CSS3 tener uno o dos valores de longitud (por lo general 'px' o los valores 'em'). Si un solo valor se suministra a continuación, que se convierte en el radio de una esquina redondeada. Si dos valores se suministran a continuación, se convierten en los radios horizontal y vertical para una esquina elíptica.
2. Using -moz-border-radius in Mozilla (Firefox)
Los siguientes ejemplos sólo funcionará si está usando Firefox u otro navegador de Mozilla que soporta -moz-border-radius propiedades.
Example 1
3. Using -webkit-border-radius in Safari (Webkit)
Las últimas versiones de Safari ahora soporte-webkit-radio de la frontera. Anteriormente, sólo el "nightly builds" que figura esta funcionalidad en la Ópera de la sintaxis de las esquinas es el mismo que en Safari, pero el comportamiento de la frontera de radio con dos valores coincide con la de Firefox, como se ve en el ejemplo n º 7 a continuación:
4. Other special effects
WebKit, Firefox y Opera soportan ahora una serie de otras características de CSS3, entre ellos los siguientes efectos simples y se transforma. Afortunadamente, a diferencia de las esquinas redondeadas, por las sombras y se transforma no parece haber un acuerdo sobre una sintaxis común.
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
Es evidente que todavía hay algunos problemas de anti-aliasing, pero para las esquinas y las curvas suaves se puede ver muy bien.
Luego hay varios-webkit-transformar de opción que se puede utilizar para crear todo tipo de formas extraño y maravilloso
-webkit-transform: rotate()Luego hay varios-webkit-transformar de opción que se puede utilizar para crear todo tipo de formas extraño y maravilloso
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: rotate(-5deg);
-webkit-transform: skew()
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(5deg,5deg); Para el navegador con impedimentos que aquí hay una captura de pantalla de Safari muestra el efecto de estas reglas CSS. Los mismos efectos son ahora posibles en Firefox, Opera y los navegadores relacionados. Basta con sustituir-webkit-moz con u o-, a excepción de la frontera de radio y una caja de sombras, donde Opera no utiliza ningún prefijo.
5. New short-hand properties
La sintaxis siguiente se encuentra trabajando en Firefox y Opera que le permite especificar no sólo coinciden con las esquinas elípticas, sino también diferentes rincones elípticas en una propiedad resumida.
Aquí hemos recreado dos de los ejemplos WebKit anterior utilizando la nueva sintaxis. Se puede ver que la configuración de la esquina individuales funcionan exactamente de la misma ahora en Firefox como en WebKit, pero para la propiedad taquigrafía es necesario incluir una barra inclinada:
Aquí hemos recreado dos de los ejemplos WebKit anterior utilizando la nueva sintaxis. Se puede ver que la configuración de la esquina individuales funcionan exactamente de la misma ahora en Firefox como en WebKit, pero para la propiedad taquigrafía es necesario incluir una barra inclinada:
Aquí usted puede ver lo que estas cajas parecen en Firefox 3.5:
