Die schwarze Technologie hier sind eigentlich einige Eigenschaften in CSS, die nicht bekannt sind, aber bei der Lösung bestimmter Probleme sehr nützlich sind.
Grenzradius
Viele Entwickler kennen diesen Grenzradius wahrscheinlich nicht richtig, weil ihn im Grunde viele Leute so verwenden:
.box {
border-radius: 4px;
}Etwas High-End Ein bisschen ist so:
.box {
border-radius: 4px 6px 6px 4px;
}Die ultimative schwarze Technologie wird jedoch so verwendet:
.box {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}Ja, sie kann 8 Werte zuweisen, noch nie gesehen? Keine Sorge, die genaue Erklärung lautet wie folgt:
Die Zahl vor dem Schrägstrich beeinflusst die horizontale Richtung und die Zahl hinter dem Schrägstrich beeinflusst die vertikale Richtung. Jede Zahl repräsentiert vier verschiedene Richtungen.
outline-offset
Ich glaube, dass viele Entwickler beim Schreiben von CSS mit der folgenden Anweisung vertraut sein werden:
input {
outline : none;
}
input:focus {
outline : none;
}Dies ist die Anleitung für das Eingabeeingabefeld Entfernen Sie den standardmäßigen blauen Linienrahmen. Tatsächlich ist hier noch zu erwähnen, dass es in CSS ein Outline-Offset-Attribut gibt. In diesem Attribut können Sie die Größe des Attributwerts wie folgt anpassen:
input {
outline-offset: 4px ;
}Sie können die Abstandsänderung des Umrisses sehen.
Klassendeklaration
Jeder kennt vielleicht die folgende Klassendeklaration:
.col-8 {
}Natürlich ist das nichts, aber was wäre, wenn Sie es so schreiben:
.♥ {
color: hotpink;
}
.★ {
color: yellow;
}Nun, wie sieht es aus, Sie können es so verwenden:
<div class="♥ ★"></div>
Solange es Unicode ist, können Sie Ihre Klasse so deklarieren.
Wählen Sie mehrere aufeinanderfolgende Elemente aus
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
background: lightpink;
}Mit der obigen Schreibmethode können Sie tatsächlich das siebte bis vierzehnte li-Element unter ol auswählen.
Pseudoklasse setzt einzelnes Tag
Es gibt mehrere gängige einzelne Tags in HTML:
,
Das folgende Beispiel dient der Änderung von
hr:before {
content: "♪♪";
}
hr:after {
content: " This is an <hr> element";
}Ja, der Schlüssel liegt in der Verwendung der beiden Pseudoklassen: before und :after. Hier können Sie übrigens tatsächlich diese beiden Pseudoklassen verwenden, um zu ändern, aber die Voraussetzung ist, dass Sie die Anzeigeattribute dieser beiden auf Folgendes setzen:
display: block
Attribute unterscheiden zwischen Groß- und Kleinschreibung
Wenn wir beim Schreiben von HTML Code ähnlich dem folgenden haben:
<div class="box"></div> <input type="email">
Dann verwenden wir den Attributselektor für die CSS-Änderung:
div[class="box"] {
color: blue;
}
input[type="email"] {
border: solid 1px red;
}Eine solche Aussage wird zweifellos wirksam sein. Wenn wir es jedoch so deklarieren, wie sieht das Ergebnis aus:
div[class="BOX"] {
color: blue;
}
input[type="EMAIL"] {
border: solid 1px red;
}Nachdem dies in Großbuchstaben umgewandelt wurde, hat die erste Klasse="BOX" keinen Einfluss auf die
