html - iOS Safari 在背景图像上添加额外的边框

Question

HTML CODE

<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>

CSS CODE

.pageHeader {
   text-align: center;
   color: #750000;
   font-family: "MedievalSharp";
   font-weight: bold;
   font-size: 60px;
}
.coolStyleUnderline {
   background: -webkit-linear-gradient(black, #750000);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   border-image: linear-gradient(to right, black, #750000);
   border-image: -webkit-linear-gradient(right, #750000, black);
   border-image-slice: 1;
   display: inline-block;
   line-height: .9;
   border-bottom: 6px solid #750000;
}

Things I have tried

• 将填充设置为 0
• 将外观(包括webkit等)设置为“无”
• 设置行高为1
• 在 border-bottom 属性之前将边框设置为无

Devices With Issue

• iPad Pro 12.9 英寸(Safari 和 Chrome)
• iPhone X(Safari 和 Chrome)
• iPhone 6s(Safari 和 Chrome)

附上两张照片。第一个是边框应该看起来的样子(在 Windows Chrome 上拍摄)，第二个是我在我的苹果设备上得到的。任何帮助深表感谢。谢谢!

No Issue Photo

Issue Photo

Answer 1

children ，我想通了。我所要做的就是指定边框图像宽度。这是通过将以下内容添加到 .coolStyleUnderline 来完成的:

border-image-width: 0px 0px 6px 0px;

感谢所有尝试过的人!祝你有美好的一天!