在 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>