Prefacio: En mi artículo " Solución semiperfecta para marcos de esquinas redondeadas súper elegantes ", resumí siete soluciones diferentes para cajas de esquinas redondeadas, que básicamente resumen las soluciones populares de implementación de cajas de esquinas redondeadas en Internet. Y en mi otro artículo, "Pictureless Peak Corner", hay otro método de implementación alternativo.
Implementar esquinas redondeadas con CSS puro es un evento que todos dicen que es malo. También escribí dos artículos resumidos. En nuestros proyectos anteriores, la implementación de esquinas redondeadas a menudo se lograba utilizando imágenes de fondo. Sin embargo, cuando estos proyectos se publicaron en línea, durante el proceso de mantenimiento, a veces fue necesario agregar algunos requisitos nuevos porque se usaban ampliamente en proyectos anteriores. imágenes de las esquinas, y todas estas imágenes se fusionan usando sprites CSS. Para no agregar más trabajo adicional y tampoco quiero usar JS para agregar más solicitudes http, se necesitan algunas soluciones CSS simples para resolver esta pregunta. En cuanto a mis preferencias personales, también me gusta utilizar un enfoque sin imágenes para manejar estos efectos. Siempre siento que CSS puede hacer el trabajo, ¿por qué no dejar que se haga?
Principio de implementación :
Muchas personas han explicado en detalle el principio de implementar un cuadro de esquinas redondeadas usando CSS puro en Internet. El siguiente diagrama es el efecto después de ampliar una de las esquinas redondeadas.
.png)
Figura 1
En las representaciones anteriores, podemos ver que este cuadro redondeado en realidad está compuesto por contenedores. Cada contenedor tiene un ancho diferente. Este ancho se logra mediante márgenes, como por ejemplo: margen:0 5px; Los lados derechos son de 5 píxeles y hay 5 líneas de arriba a abajo. Los márgenes son de 5 px, 3 px, 2 px y 1 px, decrecientes en orden. Entonces, basándonos en este principio, podemos implementar una estructura y un estilo HTML simples.
1. Capa de estructura HTML:
Contenido de texto
b1 ~ b4 constituyen las dos estructuras de esquinas redondeadas izquierda y derecha de arriba, mientras que b5 ~ b8 construyen las dos estructuras de esquinas redondeadas izquierda y derecha de abajo. El contenido es el cuerpo principal del contenido. Colóquelo todo en un contenedor grande y asígnele un nombre de clase definido para establecer un estilo común. Luego se le superpone un nombre de clase color1. Este nombre de clase se utiliza para distinguir diferentes combinaciones de colores, porque puede haber esquinas redondeadas de diferentes colores.