我正在嘗試使用 CSS 製作漸層文字。目前它可以在 Chrome 和 Firefox 中運行，但在 Safari 上，我在邊框外看到奇怪的線條。
我的 CSS 看起來像這樣...
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;
}
我的 HTML 只是一個簡單的...
<h1>Welcome to <span class="highlighted">My site</span></h1>
但在 Safari 上它會像這樣渲染。
有人可以幫我修復這些線路嗎？
1
0
0
您可以嘗試 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);
}
<h1>Welcome to <span class="highlighted">My site</span></h1>
