Prefacio: En mi artículo "Solución semiperfecta para marcos de esquinas redondeadas súper suaves", 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. ¿Por qué todavía hay este artículo? En nuestros proyectos anteriores, la implementación de esquinas redondeadas a menudo se lograba usando 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. Se utilizan imágenes de las esquinas, y todas estas imágenes se combinan utilizando sprites CSS. Para no agregar más trabajo adicional y tampoco querer 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.
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 el margen, como por ejemplo: margen:0 5px; y los lados derechos son 5 píxeles y hay 5 líneas de arriba a abajo. Los márgenes son 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:
<div class="color nítido1">
<b clase="b1"></b><b clase="b2"></b><b clase="b3"></b><b clase="b4"></b>
<div class="content">Contenido de texto</div>
</div>
<b clase="b5"></b><b clase="b6"></b><b clase="b7"></b><b clase="b8"></b>
</div>
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.