El mejor tutorial de CSS3 esquinas redondeadas en 2024. En este tutorial podrás aprender CSS3 esquinas redondeadas,Soporte para el navegador,CSS3 border-radio,Ejemplos,CSS3 border-radius - especificar cada filete,Ejemplos,Ejemplos,CSS3 esquinas redondeadas propiedad,
Utilizar CSS3 border-radio, puede realizar cualquier elemento "esquina".
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 |
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:
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:
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:
También puede crear un rincón elíptica:
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 |