CSS3 esquinas redondeadas
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
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
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
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 »
CSS3 esquinas redondeadas propiedad
propiedad | descripción |
---|---|
la frontera de radio | Las cuatro esquinas de la frontera - * - * - propiedades del radio Acrónimo |
border-top-izquierda-radio | Se define la esquina superior izquierda del arco |
border-top-derecha-radio | Se define la esquina superior derecha de Radian |
border-bottom-derecha-radio | Define el arco de la esquina inferior derecha |
border-bottom-izquierda-radio | Define el ángulo inferior izquierdo del arco |