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

Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung

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

Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung

Installation der Dekomprimierungsversion von MySQL 5.7.21 Installation des Navicat-Datenbankbetriebstools

Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten

Informationen zur ROS2-Installation und zur Verwendung der Docker-Umgebung

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

Implementierung der Knotenverbindung zur MySQL-Abfragetransaktionsverarbeitung

Wie erreicht MySQL eine Master-Slave-Synchronisierung?

Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann

MySQL 8.0.20 Installations-Tutorial und ausführliches Tutorial zu Installationsproblemen

Eine kurze Diskussion zur Verwendung von React.FC und React.Component

Artikel empfehlen

Vue verwendet Element-UI, um die Menünavigation zu implementieren

Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial

JavaScript-Grundlagen: Geltungsbereich

Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird

Grundprinzipien für die Zusammenstellung einer Website-Homepage

Zusammenfassung des Front-End-Wissens im Gokudō-Spiel

Docker ermöglicht mehrere Port-Mapping-Befehle

15 JavaScript-Funktionen, die es wert sind, gesammelt zu werden

Detaillierte Erklärung: Die MySQL-Ausführungsplan-ID ist leer (Schlüsselwort UNION).

Mehrere Navigationsrichtungen, die in Zukunft beliebt sein werden

So zeigen Sie in CocosCreator eine Textur an der Wischposition an

Über das Problem, dass die von Tomcat bereitgestellte Anwendung nicht auf die Front-End-Seite zugreifen kann

So installieren Sie Composer unter Linux

Lösung für das Timeout-Problem der SNMP4J-Serververbindung

Extrahieren Sie bestimmte Dateipfade in Ordnern basierend auf Linux-Befehlen