Préface : Dans mon article « Solution semi-parfaite pour un cadre à coins arrondis super élégants », j'ai résumé sept solutions différentes pour les boîtes à coins arrondis, qui résument essentiellement les solutions de mise en œuvre de boîtes à coins arrondis populaires sur Internet. Et dans mon autre article "Pictureless Peak Corner" se trouve une autre méthode de mise en œuvre alternative.
Implémenter des coins arrondis avec du CSS pur est un événement que tout le monde dit mauvais. J'ai également écrit deux articles de synthèse. Pourquoi y a-t-il toujours cet article ? Dans nos projets précédents, l'implémentation des coins arrondis était souvent réalisée à l'aide d'images d'arrière-plan. Cependant, lorsque ces projets étaient mis en ligne, lors du processus de maintenance, il était parfois nécessaire d'ajouter de nouvelles exigences car elles étaient largement utilisées dans les projets précédents. images de coin, et ces images sont toutes fusionnées à l'aide de sprites CSS. Afin de ne pas ajouter de travail supplémentaire et de ne pas utiliser JS pour ajouter plus de requêtes http, des solutions CSS simples sont nécessaires pour résoudre ce problème. Quant à mes préférences personnelles, j'aime également utiliser une approche sans image pour gérer ces effets. J'ai toujours l'impression que CSS peut faire le travail, pourquoi ne pas le laisser faire ?
Principe de mise en œuvre :
Le principe de l'implémentation d'une boîte à coins arrondis en utilisant du CSS pur a été expliqué en détail par de nombreuses personnes sur Internet. Le diagramme ci-dessous est l'effet après avoir agrandi l'un des coins arrondis.
D'après les rendus ci-dessus, nous pouvons voir que cette boîte arrondie est en fait composée de conteneurs. Chaque conteneur a une largeur différente. Cette largeur est obtenue par marge, telle que : margin:0 5px; les côtés droits font 5 pixels et il y a 5 lignes de haut en bas. Les marges sont de 5 px, 3 px, 2 px et 1 px, décroissantes dans l'ordre. Ainsi, sur la base de ce principe, nous pouvons implémenter une structure et un style HTML simples.
1. Couche de structure HTML :
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Contenu texte</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1 ~ b4 constituent les deux structures de coins arrondis gauche et droit ci-dessus, tandis que b5 ~ b8 construisent les deux structures de coins arrondis gauche et droit ci-dessous. Le contenu est le corps principal du contenu. Mettez le tout dans un grand conteneur et donnez-lui un nom de classe précis pour définir un style commun. Ensuite, un nom de classe color1 y est superposé. Ce nom de classe est utilisé pour distinguer différents schémas de couleurs, car il peut y avoir des coins arrondis de couleurs différentes.