CSS Border iOS外观问题的解决方案？

问题描述

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

border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn,rgb(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中使用

奥瑞（Aurélie）

p {
  border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn,rgb(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>