我正在尝试使用 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 上它会像这样渲染。
有人可以帮我修复这些线路吗？
您可以尝试
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); }