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

Question

我最近在我的一个文本元素中添加了以下代码，为其添加了一个很酷的下划线：

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上看起来是这样的：现场图片在这里

然而，在iOS设备上，边框完全围绕着整个文本，看起来是这样的：iOS实时图片在这里

我尝试了一些-webkit和-moz-fit内容类型的东西，但由于我不积极参与编程，我没有让它发挥作用。

我希望有人能帮助解决这个问题，我感谢你的解决方案！

致以最良好的问候！

Answer 1

在边界图像切片中，给它一个精度，它就可以了：(我已经测试过了，它在Safari v 13.1.2 上运行

Aurélie

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>