CSS3 esquinas redondeadas

Utilizar CSS3 border-radio, puede realizar cualquier elemento "esquina".

Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión de propiedad.

-webkit- o -moz- cifras anteriores expresaron su apoyo a la primera versión del prefijo.

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 border-radio

Utilizar CSS3 border-radio, puede realizar cualquier elemento "esquina".

Los tres ejemplos siguientes:

1. Especificar el color de fondo del elemento redondeado:

Filete!

2. Especificar el filete elemento de frontera:

Filete!

3. Especificar el filete de elementos de imagen de fondo:

Filete!

Código es el siguiente:

Ejemplos

# Rcorners1 {
la frontera de radio: 25px;
background: # 8AC007;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

# Rcorners2 {
la frontera de radio: 25px;
frontera: 2px # sólida 8AC007;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

# Rcorners3 {
la frontera de radio: 25px;
background: url (paper.gif);
background-position: izquierda arriba;
background-repeat: repeat;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

Trate »

CSS3 border-radius - especificar cada filete

Si sólo se especifica un valor en la propiedad frontera de radio, entonces se generará cuatro filetes.

Pero si desea especificar las once en las cuatro esquinas, puede usar las siguientes reglas:

Cuatro valores: esquina superior izquierda del primer valor y el segundo valor es la esquina superior derecha, la esquina inferior derecha es la tercera, y la cuarta es la esquina inferior izquierda.
Tres valores: la esquina superior izquierda del primer valor y el segundo valor es la parte superior derecha e inferior izquierda, en la esquina inferior derecha de la tercer valor
Dos valores: la primera es la parte superior izquierda e inferior derecha, y la segunda es la esquina superior derecha y la esquina inferior izquierda
Un valor: el mismo valor redondeado de cuatro

Los tres ejemplos siguientes:

1. Los cuatro valores - la frontera de radio: 15px 50px 30px 5px:

2. Los tres valores - la frontera de radio: 15px 50px 30px:

3. Los dos valores - la frontera de radio: 15px 50px:

El siguiente es el código fuente:

Ejemplos

# Rcorners4 {
la frontera de radio: 15px 50px 30px 5px ;
background: # 8AC007;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

# Rcorners5 {
la frontera de radio: 15px 50px 30px;
background: # 8AC007;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

# Rcorners6 {
la frontera de radio: 15px 50px;
background: # 8AC007;
padding: 20px;
Anchura: 200px;
altura: 150px;
}

Trate »

También puede crear un rincón elíptica:

Ejemplos

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Trate »