如何在 Safari 中的按钮上放置渐变文本？答案

【问题标题】：How can I put a a gradient text on a btn in Safari?如何在 Safari 中的按钮上放置渐变文本？
【发布时间】：2021-07-23 19:25:35
【问题描述】：

渐变在 Chrome 中有效，但在 Safari 中无效。我知道浏览器以不同的方式呈现透明，但仍然无法弄清楚。我试过了：

transparent ,rgba(255,255,255,0), and white

仍然没有运气。这是我目前拥有的：

.btn{
background: -webkit-linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: RGBA(255, 255, 255, 0);}

.btn:hover{  background: -webkit-linear-gradient(319deg, #fce055 0%, #256eff 37%, #46237a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: RGBA(255, 255, 255, 0);
}

Chrome button

Safari button

此外，渐变适用于 btn 之外的文本。 Non button gradient in Safari

【问题讨论】：

标签： css button transparent linear-gradients rgba

【解决方案1】：

所以看起来这只是按钮的错误。我一直在尝试破解它。

也就是说，如果这些按钮链接到其他网站、应用程序或页面，那么从语义上来说，将它们作为锚标记而不是按钮可能会更好。使用<a> 获取渐变文本没有问题。

【讨论】：

我确认。使用文本渐变就像一个魅力。