在 Safari 上使用“background-clip: text”时出现奇怪的线条
P粉788765679
P粉788765679 2024-01-04 22:03:52
[CSS3讨论组]

我正在尝试使用 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 上它会像这样渲染。

有人可以帮我修复这些线路吗?

P粉788765679
P粉788765679

全部回复(1)
P粉262113569

您可以尝试 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号