在 Safari 上使用“background-clip: text”時出現奇怪的線條

Question

我正在嘗試使用 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 上它會像這樣渲染。

有人可以幫我修復這些線路嗎？

Answer 1

您可以嘗試 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>