Vorwort: In meinem Artikel „Semi-Perfect Solution for Super Sleek Rounded Corner Frame“ habe ich sieben verschiedene Lösungen für Boxen mit abgerundeten Ecken zusammengefasst, was im Grunde die beliebten Implementierungslösungen für Boxen mit abgerundeten Ecken im Internet zusammenfasst. Und in meinem anderen Artikel ist „Pictureless Peak Corner“ eine weitere alternative Implementierungsmethode.
Das Implementieren abgerundeter Ecken mit reinem CSS ist ein Ereignis, von dem jeder sagt, dass es schlecht ist. Ich habe auch zwei zusammenfassende Artikel geschrieben. Die Sache ist so. In unseren früheren Projekten wurde die Implementierung abgerundeter Ecken häufig mithilfe von Hintergrundbildern erreicht. Als diese Projekte jedoch online veröffentlicht wurden, mussten während des Wartungsprozesses manchmal einige neue Anforderungen hinzugefügt werden, da diese in früheren Projekten häufig verwendet wurden Eckbilder, und diese Bilder werden alle mithilfe von CSS-Sprites zusammengeführt, um nicht noch mehr zusätzliche Arbeit zu verursachen und auch nicht JS zum Hinzufügen weiterer http-Anfragen verwenden zu wollen, sind einige einfache CSS-Lösungen erforderlich, um dieses Problem zu lösen. Was meine persönliche Vorliebe betrifft, verwende ich auch gerne einen bildfreien Ansatz, um diese Effekte zu handhaben. Ich habe immer das Gefühl, dass CSS den Job machen kann, warum sollte man es nicht machen lassen?
Umsetzungsprinzip :
Das Prinzip der Implementierung einer Box mit abgerundeten Ecken mithilfe von reinem CSS wurde von vielen Leuten im Internet ausführlich erklärt. Das folgende Diagramm zeigt den Effekt, nachdem ich eine der abgerundeten Ecken vergrößert habe.
Aus den obigen Darstellungen können wir ersehen, dass diese abgerundete Box tatsächlich aus Containern besteht. Diese Breite wird durch den Rand erreicht, z. B.: margin:0 5px; Die rechten Seiten sind 5 Pixel groß und es gibt 5 Zeilen von oben nach unten. Die Ränder sind 5 Pixel, 3 Pixel, 2 Pixel und 1 Pixel, in abnehmender Reihenfolge. Basierend auf diesem Prinzip können wir eine einfache HTML-Struktur und einen einfachen HTML-Stil implementieren.
1. HTML-Strukturebene:
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Textinhalt</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 bilden die beiden linken und rechten abgerundeten Eckstrukturen oben, während b5~b8 die beiden linken und rechten abgerundeten Eckstrukturen unten bilden. Inhalt ist der Hauptteil des Inhalts. Legen Sie alles in einen großen Container und geben Sie ihm einen scharfen Klassennamen, um einen gemeinsamen Stil festzulegen. Anschließend wird der Klassenname color1 überlagert. Dieser Klassenname wird zur Unterscheidung verschiedener Farbschemata verwendet, da es abgerundete Ecken unterschiedlicher Farbe geben kann.