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;
}

我尝试过的事情

将填充设置为0
将外观（包括webkit等）设置为“none”
将行高设置为1
在border-bottom属性

有问题的设备

iPad Pro 12.9in（Safari和Chrome）
iPhone X（Safari和Chrome）
iPhone 6s（Safari和Chrome）

我附上了两张照片。第一个是边界应该是什么样子（在Windows Chrome上拍摄），第二个是我在苹果设备上获得的。任何帮助深表感谢。谢谢！

No Issue Photo

Issue Photo

Answer 1

我认出了男生。我所要做的就是指定边框图像宽度。这是通过将以下内容添加到.coolStyleUnderline：

来完成的

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

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

iOS Safari在背景图片上添加附加边框

HTML CODE

CSS CODE

我尝试过的事情

有问题的设备

1 个答案: