CSS3 schreiben, löschen

CSS3 ist eine Stylesheet-Sprache, die für Webdesign und -layout verwendet wird. Sie verfügt über umfangreiche Funktionen und leistungsstarke Funktionen. Unter diesen ist das Durchstreichen ein häufiger Effekt, der normalerweise zur Darstellung gelöschter Texte oder Inhalte verwendet wird. In diesem Artikel erfahren Sie, wie Sie mit CSS3 durchgestrichen schreiben.

1. Verwenden Sie das Textdekorationsattribut.

Das Textdekorationsattribut wird zum Festlegen von Textmodifikationseffekten, einschließlich Durchstreichungseffekten, verwendet. Indem Sie den Wert auf „Line-Through“ setzen, kann der Strike-Through-Effekt erzielt werden. Beispielsweise der folgende CSS-Code:

.delete {
    text-decoration: line-through;
}

Dieser Stil wird auf das Element mit dem Klassennamen delete angewendet, sodass alle Textinhalte einen durchgestrichenen Effekt haben.

2. Benutzerdefinierter Durchstreichungsstil

Zusätzlich zur Verwendung des Textdekorationsattributs zum Festlegen des Durchstreichungseffekts bietet CSS3 auch verschiedene Möglichkeiten dazu Definieren Sie durchgestrichene Stile, um sie schöner und persönlicher zu gestalten.

2.1 Durchgestrichene Farbe festlegen

Legen Sie die durchgestrichene Farbe über die Eigenschaft text-decoration-color fest, zum Beispiel:

.delete {
    text-decoration: line-through;
    text-decoration-color: red;
}

Dieser Stil wird angewendet Gehen Sie zu dem Element mit dem Klassennamen „Delete“ und machen Sie die durchgestrichene Farbe aller Textinhalte rot.

2.2 Durchgestrichene Position festlegen

Durchgestrichene Position über die Eigenschaft text-decoration-position festlegen. Standardmäßig befindet sich die Durchstreichung in der Mitte des Textes. Mit dieser Eigenschaft können Sie den oberen und unteren Versatz der Durchstreichung festlegen.

.delete {
    text-decoration: line-through;
    text-decoration-position: under;
}

Dieser Stil wird auf das Element mit dem Klassennamen delete angewendet, sodass die durchgestrichene Position des gesamten Textinhalts unter dem Text liegt.

2.3 Legen Sie die Durchstreichungsbreite fest.

Legen Sie die Durchstreichungsbreite über die Eigenschaft text-decoration-thickness fest. Standardmäßig beträgt die Durchstreichungsbreite 1 Pixel. Mit dieser Eigenschaft können Sie die Breite der Durchstreichung ändern.

.delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

Dieser Stil wird auf das Element mit dem Klassennamen „delete“ angewendet, sodass alle Textinhalte eine durchgestrichene Breite von 2 Pixel haben.

3. Verwenden Sie Pseudoelemente, um eine Durchstreichung zu erzielen

Zusätzlich zur Verwendung des Textdekorationsattributs zum Festlegen des Durchstreichungseffekts kann CSS3 auch Pseudoelemente verwenden Elemente, um einen durchgestrichenen Effekt zu erzielen. Indem Sie das Inhaltsattribut des Pseudoelements auf leer setzen und seine Breite, Farbe, Position und andere Attribute festlegen, können Sie den Durchstreichungseffekt erzielen. Zum Beispiel der folgende CSS-Code:

.delete::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Dieser Stil wird auf das Pseudoelement des Elements mit dem Klassennamen delete angewendet, wodurch eine 1 Pixel breite und schwarze durchgestrichene Linie unter dem Text angezeigt wird .

Zusammenfassung

Wir können den Durchstreichungseffekt leicht durch Textdekorationsattribute, benutzerdefinierte Durchstreichungsstile und Pseudoelemente erzielen. Es ist zu beachten, dass das Durchstreichen in einigen speziellen Szenarien, wie z. B. Überlegungen zum Leseerlebnis oder zur SEO-Optimierung, nicht gilt. Dies muss je nach Situation bei der Verwendung berücksichtigt werden.

Das obige ist der detaillierte Inhalt vonCSS3 schreiben, löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!