border-radius Cómo agregar bordes redondeados a elementos
Esta vez le mostraré cómo agregar un borde redondeado al elemento border-radius y cuáles son las precauciones para agregar un borde redondeado al elemento border-radius. Aquí hay un caso práctico. echa un vistazo.
border-radius: 10px /* Todas las esquinas están redondeadas con un radio de 10px*/
border-radius: 5px 4px 3px 2px /* Los cuatro valores de radio; son respectivamente Es la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y la esquina inferior izquierda, en el sentido de las agujas del reloj*/
No creas que el valor de border-radius solo puede estar en px Unidades También puedes usar porcentajes o em, pero la compatibilidad aún es limitada.
Semicírculo superior sólido:
Método: establezca la altura en la mitad del ancho y solo establezca el radio de la esquina superior izquierda y la esquina superior derecha para que sean consistentes con la altura de el elemento (mayor de lo que también es posible).
div{
alto: 50px; /*mitad del ancho*/
ancho: 100px
fondo: #9da;
border-radius: 50px 50px 0 0 /*Establece el radio al menos al valor de la altura*/
}Círculo sólido:
Método: cambiar el ancho Los valores (ancho) y alto (alto) se establecen para que sean consistentes (es decir, un cuadrado), y los valores de las cuatro esquinas redondeadas se establecen en la mitad de sus valores.
El siguiente código:
div{
alto: 100px /*Igual que la configuración de ancho*/
ancho: 100px;
fondo: #9da;
border-radius: 50px; /*Los cuatro valores de las esquinas redondeadas se establecen en la mitad del valor de ancho o alto*/
} lt;!doctype htmlgt;
lt;htmlgt;
lt;headgt
lt;meta charset="utf-8 "gt;
lt;titlegt;border-radiuslt;/www.dztcsd.com/titlegt;
lt;style type="text/css"gt;
div.circle {
altura: 100px; /*Igual que la configuración de ancho*/
ancho: 100px
fondo: #9da; /p>
border-radius: 50px; /*Los cuatro valores de las esquinas redondeadas se establecen en la mitad del valor de ancho o alto*/
}
/*Parte de la tarea*/
div.semi-circle{
alto: 100px;
ancho:
fondo: #9da;
borde -radius：?;
}
lt;/stylegt;
lt;/headgt; p>
lt;bodygt;
lt;/stylegt;
lt;/headgt; p>
lt;div class="círculo"gt; p>
lt;/divgt;
lt;br/gt;
lt;! --Parte de la tarea--gt; div class="semi-circle"gt;
lt;/divgt;
lt;/bodygt
lt;/htmlgt; Dominó los métodos después de leer estos casos. Para obtener más información interesante, preste atención a otros artículos relacionados en el sitio web de Gxl.
Lectura relacionada:
Cómo utilizar el servidor sse de h5 para enviar eventos EventSource
Introducción detallada al almacenamiento local y la base de datos local de H5
h5 Cómo implementar la función recordar contraseña