CSS 边框 iOS 外观问题的解决方案?

Solution for CSS Border iOS appearance issue?

我最近将以下代码添加到我的一个文本元素中,以为其添加很酷的下划线:

border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;

在 chrome 和 Android 上看起来像这样: live picture here

但是,在 iOS 设备上,边框完全包围了整个文本,看起来像这样: iOS live picture here

我尝试了一些 -webkit 和 -moz-fit-content 类型的东西,但由于我没有积极参与编程,所以我没有让它工作。

我希望有人能帮助解决这个问题,非常感谢你的解决方案!

此致!

在你的 border-image-slice 中,给它精确度就可以了:) 我已经对其进行了测试,它适用于 Safari v 13.1.2

奥雷莉

p {
  border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}
<p>Biscuit cake sweet roll. Carrot cake caramels</p>