Mehrere CSS-Black-Technologien

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:
,

---

usw.

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

und der zweite Typ="EMAIL" ändern den weiterhin normal. Achten Sie daher bei der Verwendung von Attributselektoren auf die Groß- und Kleinschreibung.

Verwandte Etiketten：

css

Quelle：php.cn

Vorheriger Artikel：CSS-Parallelogramm- und Rautentransformation Nächster Artikel：Spezifikationen für die mobile Webentwicklung im Detail

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Einführung in den PHP-OB-Cache und detaillierte Erläuterung der OB-Funktion
  2023-03-07 21:36:01
• So ändern Sie das Passwort in MySQL mit dem Befehl cmd
  1970-01-01 08:00:00
• Detaillierte Erläuterung, wie Javascript Cookies verwaltet, um Beispiele für Benutzeranmeldecodes zu implementieren
  1970-01-01 08:00:00
• Was sind PHP-Klassen? Detaillierte Erläuterung der Attribute der PHP-Klasse
  2023-03-11 13:22:01
• Detaillierte Erläuterung der Verwendung der grundlegenden JavaScript-Funktionen Debounce, Poll und Once-Instanzen
  1970-01-01 08:00:00
• Einführung in neue Funktionen wie PHP7-Funktionen, Deklarationen, Rückgabewerte usw.
  2023-03-11 15:08:02
• Ausführliche Erklärung, wie man den Array-Schlüsselnamen mit PHP array_keys() erhält
  2023-03-12 07:44:02
• PHP ist mit der Verwendung der Aktualisierungspufferfunktion bestens vertraut
  2023-03-11 10:18:01
• Ausführliche Erklärung, wie Javascript Funktionen verwendet, und Beispiele für die Verwendung von Rückgabewerten
  1970-01-01 08:00:00
• Einführung verschiedener Sortierarten, wenn Django die Datenbank abfragt
  1970-01-01 08:00:00

Aktuelle Ausgaben

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1335

Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...

Aus 2024-04-06 21:58:04

0

1

800

Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...

Aus 2024-04-06 20:57:16

0

1

487

Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...

Aus 2024-04-06 20:45:26

0

2

386

Gibt es eine Möglichkeit, die vertikale Zentrierung des Texts in der Flexbox zu erzwingen, unabhängig davon, welchen anderen CSS-Code wir haben? Ich habe den folgenden CSS-Code, der Teil eines größeren CSS-Codes ist, der in einer Websi...

Aus 2024-04-06 20:41:51

0

1

518

verwandte Themen

Mehr>

• CSS
• CSS-zentriert
• So fügen Sie Bilder in CSS ein
• CSS außerhalb der Anzeige ...
• CSS-Schriftfarbe
• Was ist CSS?
• Wie schreibe ich ein Dreieck in CSS?
• CSS-Textfarbe festlegen