Heim > Artikel > Web-Frontend > CSS nutzt die Sprites-Technologie, um abgerundete Ecken zu erzielen
CSS nutzt die Sprites-Technologie, um abgerundete Ecken zu erzielen
- 不言Original
- 2018-06-28 11:17:392036Durchsuche
Dieser Artikel stellt hauptsächlich den Effekt der Verwendung der CSS-Sprites-Technologie vor, um abgerundete Ecken zu erzielen. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
Die Verwendung der CSS-Sprites-Technologie Einfach ausgedrückt besteht das Zeichnen von Kreisen darin, einen Kreis auf einem Bild zu erstellen, 4 Ps zu definieren und eine Ecke des Bildes als Hintergrund für jedes P zu verwenden. Schauen wir uns die spezifische Implementierungsmethode an.
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 p eine .roundedBox-Klasse:
<p class="roundedBox"></p>
Jetzt müssen wir noch vier weitere Ps hinzufügen, die in Zukunft beim Erstellen von Filets verwendet werden. Anschließend muss für jede eine Klasse .corner geladen und eine Klasse identifiziert werden, um die Position ihres Rasters anzugeben.
<p class="roundedBox">
<strong>My content in roundedBox Type 1</strong>
<p class="corner topLeft"></p>
<p class="corner topRight"></p>
<p class="corner bottomLeft"></p>
<p class="corner bottomRight"></p>
</p>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 zunächst alle abgerundeten Ecken definieren
Alle abgerundeten Ecken müssen mit absoluter Positionierung definiert werden und die Höhe und Breite müssen angegeben werden. Die Breite und Höhe meiner abgerundeten Ecken beträgt jeweils 17 Pixel.
.corner{position:absolute;width:17px;height:17px;}Jetzt definieren wir den p-Container-Stil:
.roundedBox {position:relative;}Alles, was mit der Klasse .roundedBox Within definiert ist Ein Element. Absolut positionierte Elemente werden relativ zu diesem Element positioniert, nicht zum Tag-Kö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 die Breite und Höhe meiner Verrundung gleich, daher sind auch die Füllwerte der vier Ecken gleich:
.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 (entsprechend unserem Sprite):
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}Zuletzt passen Sie eine Hintergrundfarbe an #type1 an, damit sie in das Sprite Rounded integriert werden kann Ecken:
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}Alle Codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<p class="roundedBox" id="type1">
<strong>My content in roundedBox Type 1</strong>
<p class="corner topLeft"></p>
<p class="corner topRight"></p>
<p class="corner bottomLeft"></p>
<p class="corner bottomRight"></p>
</p>
</body>
</html>
Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Dreidimensionale CS3-Verformung zur Realisierung dreidimensionaler Blöcke
Es wurden etwa 20 Ladeanimationseffekte erzeugt von CSS3
So implementieren Sie den Animationseffekt des gleichzeitigen Kippens und Drehens in CSS3
Das obige ist der detaillierte Inhalt vonCSS nutzt die Sprites-Technologie, um abgerundete Ecken zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!