manual de referencia CSS

CSS @reglas (RULES)

大全 de atributos CSS

Borde CSS-Atributo right Borde CSS-left-Atributo width

CSS3 border-radius attribute usage and example

border-The radius attribute sets the corner of the element to a rounded shape. It isborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusandborder-bottom-left-radiusAttribute abbreviation.

The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts.

Default value:	0
Applies to:	All elements
Inheritance:	none
Animatable:	is.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object object.style.borderRadius="8px"

Nota:border-Even if the border is not defined or the value is set to none, this attribute will make the element's background rounded.

border-radius usage syntax

The syntax of this attribute is as follows:

border-radius: [length | percentage]　1　to　4　values　
　\"-------------------------------/
　　　　　　　　　　　　First radii
/　[length | percentage]　1　to　4　values | initial | inherit
　　　\"------------------------------/
　　　　　　　　Segundo radio (opcional)

Este atajo puede tener un, dos, tres o cuatro valores separados por espacios en blanco.

Si se especificaUn valorSe define el radio de todas las esquinas.
Si se especificanDos valoresSe utiliza el primer valor para el superior izquierdo y el inferior derecho, y el segundo valor para el superior derecho y el inferior izquierdo.
Si se especificanTres valoresSe utiliza el primer valor para el superior izquierdo, el segundo valor para el superior derecho y el inferior izquierdo, y el tercer valor para el inferior derecho.
Si se especificanCuatro valoresSi se especifican, todos los valores se aplican en el orden superior izquierdo, superior derecho, inferior derecho e inferior izquierdo a la borde.

El siguiente ejemplo muestra cómo usar border-Atributo radius.

Ejemplo

　　div {
　　　border:　2px sólido #f08080;
　　　border-radius:　20px;
　　}

Pruebe para ver‹/›

Nota:Valor de longitud opcional (con " /Un valor que comienza con "" define el radio vertical de la esquina, por lo que la forma de la esquina es un cuarto de elíptico. Si se omite el segundo valor de longitud o es igual al segundo valor de longitud, la forma de la esquina es un cuarto de círculo. Si cualquier longitud es cero, la esquina es cuadrada en lugar de redondeada.

Valores del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
length	En valores de longitud como px, pt, cm, em, etc., no se permiten valores negativos.
percentage	El tamaño del radio, en porcentajes. Si es un radio elíptico, el porcentaje del radio horizontal se calcula en relación con el ancho del cuadro del elemento y el porcentaje del radio vertical se calcula en relación con la altura del cuadro del elemento. No se permiten valores negativos.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento relacionado utiliza el borde del elemento padre-Valores del atributo radius.

Compatibilidad del navegador

border-Compatibilidad del navegador para el atributo radius, los números en la tabla a continuación representan la versión mínima de los navegadores que soportan este atributo; todos los navegadores principales soportan este atributo.

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

Advertencia: Internet Explorer 8y versiones anteriores no soportan este borde-Atributo radius. En IE9y versiones posteriores son compatibles.

Para leer más

Consulte el tutorial:CSS Border,CSS3 Borde.

Atributos relacionados:border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius

Borde CSS-Atributo right Borde CSS-left-Atributo width