Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens
|
Angenommen, es gibt einen solchen Anfangscode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
div {
Rand links: 100px;
Rand oben: 100px;
Polsterung: 0;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: grün;
Umriss: 20px durchgezogen #000;
Umriss-Offset: 10px;
}
</Stil>
</Kopf>
<Text>
<div></div>
</body>
</html>Die Auswirkungen sind wie folgt:
Ändern Sie dann den Wert der Eigenschaft „outline-offset“ auf -118px, und der Rahmen wird zu einem Pluszeichen. Um den Effekt noch deutlicher zu machen, habe ich natürlich einen Animationseffekt hinzugefügt, um ihn anzuzeigen, wie im folgenden Code gezeigt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
div {
Rand links: 100px;
Rand oben: 100px;
Polsterung: 0;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: grün;
Umriss: 20px durchgezogen #000;
Animation: Bewegung 3 s unendlich;
}
@keyframes verschieben {
0% {
Umriss-Offset: 10px;
}
100 % {
Umriss-Offset: -118px;
}
}
</Stil>
</Kopf>
<Text>
<div></div>
</body>
</html>Die Auswirkungen sind wie folgt:
Verwenden Sie den Umriss-Offset, um eine Zusammenfassung mit Pluszeichen zu erstellen Ich finde das sehr interessant. Ich habe es hier oft ausprobiert. Hier fasse ich die Bedingungen für die Verwendung negativer Werte der Outline-Offset-Eigenschaft zusammen:
Nach diesem Beispiel fiel mir erneut auf, dass es viele CSS-Eigenschaften und Stellen gibt, an denen sie negative Werte annehmen können, und dass es auch viele unerwartete Effekte gibt. Die bekannteste ist der negative Rand. Mit einem negativen Rand können Sie ein ähnliches mehrspaltiges Layout gleicher Höhe, vertikale Zentrierung usw. erreichen. Gibt es noch andere interessante Techniken für die Verwendung negativer Werte? Der folgende Artikel stellt einige interessante Anwendungsszenarien für negative CSS-Werte vor. Verwenden Sie scale(-1), um Flip zu erreichen Wenn wir ein Element um 180° drehen möchten, verwenden wir normalerweise
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.g_container {
Position: absolut;
Rand: 100px 0 0 500px;
}
.Artikel {
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: grün;
Position: relativ;
Randradius: 50 %;
}
.Artikel {
transformieren: drehen(0) übersetzen(-80px, 0);
}
.item:n-tes-Kind(1) {
Animation: 3 s unendlich linear drehen;
}
.item:n-tes-Kind(2) {
Animation: 3 s unendlich rotieren, 1 s linear;
}
.item:n-tes-Kind(3) {
Animation: 3 s unendlich rotieren, 2 s linear;
}
@keyframes drehen {
100 % {
transformieren: drehen (360 Grad) verschieben (-80px, 0);
}
}
</Stil>
</Kopf>
<Text>
<div Klasse="g_container">
<div Klasse="Artikel"></div>
<div Klasse="Artikel"></div>
<div Klasse="Artikel"></div>
</div>
</body>
</html>Sehen Sie die Wirkung:
Wenn Sie die drei Bälle gleichzeitig bewegen und die Verzögerung entfernen möchten, können Sie den Code natürlich wie folgt ändern:
.item:n-tes-Kind(1) {
Animation: 3 s unendlich linear drehen;
}
.item:n-tes-Kind(2) {
Animation: 3 s unendlich drehen -1 s linear;
}
.item:n-tes-Kind(3) {
Animation: 3 s unendlich drehen -2 s linear;
}Ich werde nicht über den Effekt sprechen, es ist nur eine gleichzeitige Bewegung, Sie können sich auf den Effekt oben beziehen Negative Marge Negative Ränder werden in CSS häufig verwendet. Der Rand eines Elements kann auf einen negativen Wert gesetzt werden. Bevor die Flexbox-Layout-Spezifikation populär wurde, war noch einiges an Aufwand nötig, um ein mehrzeiliges Layout mit gleicher Höhe zu erreichen. Eine Möglichkeit besteht darin, die Methode zum Aufheben positiver Polsterung und negativer Ränder zu verwenden. Es ergibt sich folgender Aufbau:
Der Inhalt der linken und rechten Spalte ist unsicher, das heißt höchst unbekannt. Ich hoffe jedoch, dass die Höhe der beiden Spalten immer gleich bleibt, unabhängig davon, ob links oder rechts mehr Inhalt steht. OK, ein Trick besteht darin, eine große positive Polsterung und den gleichen negativen Rand zu verwenden, um die linke und rechte Spalte zu füllen:
.links {
...
Polsterung unten: 9999px;
Rand unten: -9999px;
}
.Rechts {
...
Polsterung unten: 9999px;
Rand unten: -9999px;
}Dadurch kann erreicht werden, dass sich die untere Spalte mit der anderen Spalte ändert, unabhängig davon, wie sich die Höhe der linken und rechten Spalte ändert. Um zusammenzufassen Darüber hinaus gibt es noch viele weitere Eigenschaften, für die hier (aufgrund der begrenzten Kenntnisse und Zeit des Autors) keine Beispiele aufgeführt sind, zum Beispiel:
Zusammenfassen Dies ist das Ende dieses Artikels über die Verwendung der Outline-Offset-Eigenschaft in CSS zur Implementierung des Pluszeichens. Weitere verwandte Inhalte zur CSS-Outline-Offset-Eigenschaft finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Eine kurze Erläuterung zur Verwendung von Slots in Vue
Artikel empfehlen
Verwendung und Beispiele für Linux-Befehle zur Echotextverarbeitung
Die Beschreibung von echo im Linux-Hilfedokument ...
Implementierungscode für unendliches Scrollen mit n Containerelementen
Szenario So rendern Sie Listen mit bis zu 10.000 ...
Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue
Ich habe kürzlich den Quellcode von Vue studiert ...
Detaillierte Erklärung zum Bereitstellen von H5-Spielen auf einem Nginx-Server
Auf dem Weg zur selbstlernenden Spieleentwicklung...
11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen
1. Löschen Sie das gepunktete Feld, wenn die Scha...
Parameter, um Iframe transparent zu machen
<iframe src="./ads_top_tian.html" all...
CocosCreator Universal Framework Design Network
Inhaltsverzeichnis Vorwort WebSocket verwenden Er...
So stellen Sie die LNMP-Architektur im Docker bereit
Umweltanforderungen: IP Hostname 192.168.1.1 Knot...
So starten/stoppen Sie den Tomcat-Server in Java
1. Projektstruktur 2. Rufen Sie Tomcat.java auf P...
Beispiel für die Verwendung von CSS zum Erzielen eines halbtransparenten Hintergrunds und undurchsichtigen Textes
Dieser Artikel stellt ein Beispiel vor, wie man m...
Was sind die Vorteile von MySQL MGR?
MGR (MySQL Group Replication) ist eine neue Funkt...
So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe
Zwei Hauptkategorien von Indizes Verwendete Speic...
Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten
Vor kurzem musste ich beim Entwickeln einer Websi...
Implementierung eines einfachen Timers in JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS
Schauen wir uns zunächst die Definition des Posit...