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

【问题标题】：Solution for CSS Border iOS appearance issue?CSS Border iOS 外观问题的解决方案？
【发布时间】：2020-08-28 12:59:02
【问题描述】：

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

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 类型的东西，但由于我没有积极参与编程，所以我没有让它工作。

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

最好的问候！

【问题讨论】：

标签： css css-selectors border text-decorations text-styling

【解决方案1】：

在你的边框图像切片中，给它精确，它会好的 :) 我已经对其进行了测试，它适用于 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;
}

&lt;p&gt;Biscuit cake sweet roll. Carrot cake caramels&lt;/p&gt;

【讨论】：