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
MySQL-Abfragedaten aus einer Tabelle und Einfügen in eine andere Tabellenimplementierungsmethode
MySQL-Abfragedaten aus einer Tabelle und Einfügen...
Grafisches Tutorial zur Installation der komprimierten Version von MySQL 8.0.15
In diesem Artikel wird die Installationsmethode d...
Mehrere gängige Methoden zum Übergeben zusätzlicher Parameter beim Senden eines Formulars
Beim Absenden eines Formulars kann es vorkommen, d...
Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf
Die übergeordnete Vue-Komponente ruft die Funktio...
Reine JS-Methode zum Exportieren von Tabellen nach Excel
html <div > <button type="button&qu...
Win10+Ubuntu 20.04 LTS Dualsysteminstallation (UEFI + GPT) (Bilder und Text, Warnung vor mehreren Bildern)
Win10-Installation (überspringen, falls bereits i...
Beispiel für utf8mb4-Sortierung in MySQL
Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...
Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips
Einführung in die Umgebung: Ubuntu Server 16.04.2...
Lösen Sie das Gruppieren-nach-Abfrage-Problem nach dem Upgrade von Mysql auf 5.7
Finden Sie das Problem Nach dem Upgrade von MySQL...
Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React
Inhaltsverzeichnis Unkontrollierte Komponenten Ko...
Zusammenfassung der Fallstricke bei der Installation von MySQL und MySQLClient auf CentOS7
1. MySQL Yum-Repository hinzufügen Offizielle MyS...
So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus
Phänomen: Führen Sie ein Image aus, zum Beispiel ...
MySQL-Beispiel zum Abrufen des heutigen und gestrigen Zeitstempels 0:00
Wie unten dargestellt: Gestern: UNIX_TIMESTAMP(CA...
Dieser Artikel hilft Ihnen beim Einstieg und beim Verständnis der grundlegenden Vorgänge von JQuery
Inhaltsverzeichnis 1. Schritte zur Verwendung von...
So verwenden Sie Web-Frontend-Vektorsymbole
Vorwort Beim Schreiben von Frontend-Seiten verwen...