En el proceso de creación de páginas web, a veces es posible que necesitemos lograr el efecto de esquinas redondeadas. El método anterior consistía en cortar el borrador del diseño en imágenes que se pudieran convertir fácilmente en páginas y utilizar varias imágenes de fondo para lograr esquinas redondeadas. Después de la aparición de CSS3, no hay necesidad de tener tales problemas. CSS3 proporciona una serie de propiedades para establecer el efecto de esquinas redondeadas de los elementos, como se muestra a continuación:
Los valores opcionales de las funciones anteriores se muestran en la siguiente tabla:
border-radius se utiliza para implementar bordes redondeados.
Ejemplo:
<html><head><style>div{ancho:300px;alto:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ cuerpo></html>Resultados de ejecución:
Pero si configuro el radio del borde en 150 px, se convertirá en un borde circular.
<html><head><style>div{ancho:300px;alto:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ cuerpo></html>Resultados de ejecución:
Para mayor comodidad, simplemente establezca el radio del borde en 50%. El efecto es el mismo.
Pero si quieres dibujar un círculo, el ancho y el alto deben ser iguales.
De hecho, se pueden conectar varios valores de atributo después del radio del borde. Para un valor de atributo como el anterior, las cuatro esquinas tendrán de forma predeterminada este valor de atributo. Si los cuatro valores de atributo son obviamente relativos a las cuatro esquinas. ¿Cuál es el método relativo? Comenzando desde la esquina superior izquierda y en el sentido de las agujas del reloj.
Ejemplo:
<html><head><style>div{ancho:300px;alto:300px;border:1pxsolidblack;fondo:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div </div></body></html>Resultados de ejecución:
Por ejemplo, dibujemos un huevo:
<html><head><style>div{ancho:80px;alto:100px;border:1pxsolidblack;fondo:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>Resultados de ejecución:
