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 上看起来像这样： live picture here

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

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

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

此致！

Answer 1

在你的 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>

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

Solution for CSS Border iOS appearance issue?

css

border

css-selectors

text-styling

text-decorations