在 Safari 上使用“背景剪辑：文本”时出现奇怪的线条答案

【问题标题】：Strange lines when using `background-clip: text` on Safari在 Safari 上使用“背景剪辑：文本”时出现奇怪的线条
【发布时间】：2022-08-07 17:22:50
【问题描述】：

我正在尝试使用 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 上它呈现这样。

谁能帮我修复这些线？

标签： css safari linear-gradients background-clip

【解决方案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);
}

&lt;h1&gt;Welcome to &lt;span class="highlighted"&gt;My site&lt;/span&gt;&lt;/h1&gt;

【讨论】：