Ich versuche, Verlaufstext mit CSS zu erstellen. Derzeit funktioniert es in Chrome und Firefox, aber in Safari sehe ich seltsame Linien außerhalb der Ränder.
Mein CSS sieht so aus...
h1 {
font-family: "Work Sans", Helvetica, Arial, sans-serif;
}
.highlighted {
color: transparent;
background: linear-gradient(90deg, #FF008B, #FF006B);
background-clip: text;
-webkit-background-clip: text;
}
Mein HTML ist nur ein einfaches...
<h1>Welcome to <span class="highlighted">My site</span></h1>
Aber auf Safari wird es so gerendert.
Kann mir jemand helfen, diese Zeilen zu reparieren?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以尝试
clip-path来修复它：h1 { font-family: "Work Sans", Helvetica, Arial, sans-serif; } .highlighted { color: transparent; background: linear-gradient(90deg, #FF008B, #FF006B); -webkit-background-clip: text; background-clip: text; padding: 1px; clip-path: inset(1px); }