CSS verwendet die Sprites-Technologie, um abgerundete Ecken zu erreichen_Erfahrungsaustausch

Lassen Sie uns zunächst kurz darüber sprechen, was Sprites ist eine Web-Bildanwendungsverarbeitungsmethode. Es ermöglicht Ihnen, alle verstreuten Bilder einer Seite in einem großen Bild zusammenzufassen, sodass beim Zugriff auf die Seite nicht wie zuvor die geladenen Bilder einzeln angezeigt werden. Bei der derzeit gängigen Netzwerkgeschwindigkeit ist die Ladezeit für ein einzelnes Bild, das 200 KB nicht überschreitet, grundsätzlich gleich, sodass Sie sich über dieses Problem keine Sorgen machen müssen.

Schritt 1: Erstellen Sie unser Sprite

Verwenden Sie Tools wie PS, um das Bild wie im Bild gezeigt zu synthetisieren (erkennbar an einer roten Linie von einem Pixel)

Schritt 2: HTML-Code schreiben

Zuerst geben wir dem Container-Div eine .roundedBox-Klasse:

Code kopieren Der Code lautet wie folgt:

Jetzt müssen wir vier weitere Divs hinzufügen, die in Zukunft beim Erstellen abgerundeter Ecken verwendet werden. Dann muss für jede eine Klasse .corner geladen und eine Klasse identifiziert werden, um die Position ihres Rasters anzugeben.

Code kopieren Der Code lautet wie folgt:

Mein Inhalt in RoundedBox Typ 1

Schritt 3: CSS-Stile schreiben

Absolut positionierte Elemente werden normalerweise entsprechend ihren relativ positionierten übergeordneten Elementen positioniert. Wenn das übergeordnete Element nicht definiert werden kann, wird es bis zum Body-Tag zum zuletzt relativ positionierten übergeordneten Element verschoben.

Lassen Sie uns zuerst alle Filets definieren

Alle Filets müssen absolut positioniert und mit Höhe und Breite markiert sein. Die Breite und Höhe meiner Verrundungsdefinition betragen jeweils 17 Pixel.

Code kopieren Der Code lautet wie folgt:

.corner{position:absolute;width:17px;height:17px;}

Beginnen Sie nun mit der Definition des div-Containerstils:

Code kopieren Der Code lautet wie folgt:

.roundedBox {position:relative;}

In jedem mit der Klasse .roundedBox definierten Element werden absolut positionierte Elemente relativ zu diesem Element positioniert, nicht zum Etikettenkörper. Wir müssen auch einige Füllwerte festlegen. Wenn diese nicht festgelegt werden, verdecken die abgerundeten Ecken unseren Text, was definitiv nicht der gewünschte Effekt ist. Wichtig: Die oberen und unteren Polsterwerte müssen der Höhe der Verrundung entsprechen. Die linken und rechten Füllwerte müssen der Breite der Verrundung entsprechen. Wie Sie bereits wissen, sind Breite und Höhe meiner Rundung gleich, daher sind auch die Füllwerte der vier Ecken gleich:

Code kopieren Der Code lautet wie folgt:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

Lassen Sie uns eine separate Definition für keine abgerundeten Ecken erstellen

Wir legen die absolute Positionierung jeder abgerundeten Ecke fest und positionieren das Hintergrundbild (gemäß unserem Sprite):

Code kopieren Der Code lautet wie folgt:

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; Hintergrundposition:-1px -1px;}
.topRight {top:0; right:0; Hintergrundposition:-19px -1px;}
.bottomLeft {bottom:0; left:0; Hintergrundposition:-1px -19px;}
.bottomRight {bottom:0; right:0; Hintergrundposition:-19px -19px;}

Zuletzt passen Sie eine Hintergrundfarbe an #type1 an, damit sie mit den abgerundeten Ecken im Sprite verschmilzt:

Code kopieren Der Code lautet wie folgt:

#type1 {Hintergrundfarbe:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

Alle Codes:

Code kopieren Der Code lautet wie folgt:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

Mein Inhalt in RoundedBox Typ 1