Zwei Möglichkeiten zur Implementierung von Textstrichen in CSS3 (Zusammenfassung)

Frage

Vor kurzem bin ich auf die Anforderung gestoßen, den unten gezeigten Textstricheffekt zu erzielen.

Lösung 1

Ich dachte zuerst daran, zu prüfen, ob es in CSS3 ein Attribut gibt, mit dem dies erreicht werden kann, und dann fand ich text-stroke

Diese Eigenschaft ist eine zusammengesetzte Eigenschaft, mit der die Textbreite und die Textstrichfarbe festgelegt werden können.

Diese Eigenschaft ist sehr einfach zu verwenden: text-stroke:1px#f00; (1px ist die Textbreite, #ff ist die Textstrichfarbe)

Ich dachte, die Kompatibilität dieser Eigenschaft würde meine leicht hochgezogenen Mundwinkel mit der Zeit stoppen, und dann verfestigte sich allmählich

Aber überraschenderweise unterstützen die meisten Browser diese Eigenschaft inzwischen. Sie müssen nur das Präfix -webkit- hinzufügen.

Demo

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="UTF-8">
        <title>Textstrich-Textstrich</title>
        <Stil>
            .demo {
                Farbe: Nebelrose;
                Textausrichtung: zentriert;
                Schriftfamilie: Verdana;
                Schriftgröße: 30px;
                Schriftstärke: fett;
            }
            .Schlaganfall {
                -webkit-text-stroke: 1px grüngelb;
            }
        </Stil>
    </Kopf>
 
    <Text>
        <div Klasse="Demo">
            <p>Kein Strich hinzugefügt</p>
            <p class="stroke">Schriftstrich hinzugefügt</p>
        </div>
    </body>
</html>

Lösung 2 (empfohlen)

Ich habe zufällig eine Methode entdeckt, mit der man auch ohne das Textstrich-Attribut einen Textstrich erzielen kann - Textschatten

Und die Textschatteneigenschaft ist kompatibler und muss nicht mit -webkit- beginnen

Demo

<!DOCTYPE html>
<html>
     <Kopf>
           <meta charset="UTF-8">
           <title>Text-Schatten-Textstrich</title>
           <Stil>
                .demo {
                    Textausrichtung: zentriert;
                     Schriftfamilie: Verdana;
                     Schriftgröße: 30px;
                     Schriftstärke: fett;
                     Farbe: rot;
                }
                
                .Schlaganfall {
                     Textschatten: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
                }
           </Stil>
     </Kopf>
     <Text>
           <div Klasse="Demo">
                <p>Kein Strich hinzugefügt</p>
                <p class="stroke">Schriftstrich hinzugefügt</p>
           </div>
     </body>
</html>

CSS simulierter Textstricheffekt 2

P{
   Textschatten:
   -1px -1px 0 #4f4d57,  
   1px -1px 0 #4f4d57,
   -1px 1px 0 #4f4d57,
   1px 1px 0 #4f4d57,
   0px 2px 2px rgba(0,0,0,0,6);
   Schriftgröße: 15px;         
   Farbe: #f2f2f2;
   Schriftfamilie: „Microsoft YaHei“;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

>>: Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu

Die Umsetzung von Youdas neuem Petite-Vue

Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das den ausgewählten Beispielcode anzeigt

Artikel

Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker

Zwei Möglichkeiten zur Implementierung von Textstrichen in CSS3 (Zusammenfassung)

Die Umsetzung von Youdas neuem Petite-Vue

Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches

Zwei Möglichkeiten, die CSS-Priorität zu verstehen

Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das den ausgewählten Beispielcode anzeigt

Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker

So zeigen Sie JSON-Daten in HTML an

Chrome überwacht Cookie-Änderungen und weist Werte zu

So ändern Sie das MySQL-Tabellenpartitionierungsprogramm

Einfache Schritte zum Erstellen eines MySQL-Containers mit Docker

Lösung zur inkonsistenten Anzeige der Cursorgröße im Eingabefeld

Artikel empfehlen

Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)

Detaillierte Erläuterung des CocosCreator-Projektstrukturmechanismus

JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)

MySQL 8.x MSI-Version Installations-Tutorial mit Bildern und Text

Das WeChat-Applet realisiert die Funktion zum Hochladen von Bildern

Native JS-Implementierung der Lupenkomponente

Windows 10 1903 Fehler 0xc0000135 Lösung [empfohlen]

Implementierung der Parametersprungfunktion im Vue-Projekt

Zusammenfassung der Formulardesigntechniken im Webdesign

Grafisches Tutorial zur Kompilierung des MySQL 5.7.13-Quellcodes sowie zur Installations- und Konfigurationsmethode

So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver

Detaillierte Erklärung der Truncate-Verwendung in MySQL

So verwenden Sie crontab, um MySQL-Datenbanken regelmäßig im Linux-System zu sichern

HTML-Tabellen-Tag-Tutorial (24): horizontales Ausrichtungsattribut der Zeile ALIGN

Gespeicherte MySQL-Prozeduren und allgemeine Funktionscodeanalyse