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
Detaillierte Erklärung der Verwendung des Linux-Befehls nslookup
[Wer ist nslookup?] 】 Der Befehl nslookup ist ein...
Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen
Während des Projekts habe ich begonnen, die js re...
Detaillierte Erklärung unsichtbarer Indizes in MySQL 8.0
Wort Seit der ersten Version von MySQL 8.0 liegen...
Mehrere häufig verwendete Single-Page-Anwendungswebsite-Sharing
CSS3Bitte Schauen Sie sich diese Website selbst a...
Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren
1. parseFloat()-Funktion Erstellen Sie auf einer ...
MySQL sollte niemals Update-Anweisungen wie diese schreiben
Inhaltsverzeichnis Vorwort Ursache Phänomen warum...
So verwenden Sie einen SSH-Tunnel, um eine Verbindung zum MySQL-Server herzustellen
Vorwort In einigen Fällen kennen wir nur die Intr...
Interpretation von syslogd- und syslog.conf-Dateien unter Linux
1: Einführung in syslog.conf Für verschiedene Uni...
Eine kurze Diskussion über 3 bemerkenswerte neue Features in TypeScript 3.7
Inhaltsverzeichnis Vorwort Optionale Verkettung N...
So konfigurieren Sie die Datei My.ini bei der Installation der MySQL5.6.17-Datenbank
Ich habe kürzlich bei der Entwicklung eines Proje...
5 coole und praktische Einführung in HTML-Tags und -Attribute
Tatsächlich handelt es sich auch hier um einen Cl...
So stellen Sie mit Node-Red eine Verbindung zur MySQL-Datenbank her
Um Node-red mit der Datenbank (mysql) zu verbinde...
Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue
1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...
Detaillierte Schritte zum Selbststart und geplanten Start von Python-Skripten unter Linux
1. Python wird beim Start automatisch ausgeführt ...
Die Iframe-Aktualisierungsmethode ist bequemer
So aktualisieren Sie Iframe 1. Zum Aktualisieren k...