So erzielen Sie einen Schriftstricheffekt in CSS: Sie können das Textstrichattribut verwenden, um einen Schriftstricheffekt zu erzielen, z. B. [-webkit-text-Stroke:6px transparent;]. Das Text-Stroke-Attribut wird häufig in Verbindung mit dem Text-Fill-Color-Attribut verwendet.
Text-Stroke ist die Abkürzung für Text-Stroke-Width und Text-Stroke-Color (Füllfarbe für Text).
(Teilen von Lernvideos: css-Video-Tutorial)
Das Text-Stroke-Attribut wird oft zusammen mit Text-Fill-Color verwendet (das Text-Fill-Color-Attribut dient dazu, den Text mit Farbe zu füllen).
Beispiel:
Textverlaufseffekt für Textstriche, Textstrichfarbe auf transparent setzen:
h2{
background:-webkit-linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color:#fff;
-webkit-text-stroke:6px transparent;
}Gleiches Prinzip: Wenn Sie das obige Hintergrundbild durch ein Bild ersetzen, können Sie auch einen Strich mit dem Bild als Basiskante erstellen Effekt:
h3{
background:url(bingzhang.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color:#fff;
-webkit-text-stroke:6px transparent;
}Der Effekt ist wie folgt:
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Schriftstricheffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
