在 Safari 上使用“background-clip: text”时出现奇怪的线条-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在 Safari 上使用“background-clip: text”时出现奇怪的线条

P粉788765679 2024-01-04 22:03:52

[CSS3讨论组]

1001

我正在尝试使用 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

全部回复(1)

P粉2621135692024-01-05 21:12:33 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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部