border渐变 ios_使用border-image制作渐变边框 ios兼容性问题

为盒子设置左侧边框渐变效果，代码如下：

.box1 {

height: 200px;

width: 200px;

background-color: #f1f1f1;

padding: 15px;

box-sizing: border-box;

border: none;

border-left: 1px solid #155799;

border-image: linear-gradient(#155799, #159957) 30 30;

}

pc、安卓 下的显示效果：

在iOS上的显示效果：

改成以下写法即可显示效果一致:

.box2 {

height: 200px;

width: 200px;

background-color: #f1f1f1;

padding: 15px;

box-sizing: border-box;

border-top: solid 0 transparent;

border-bottom: solid 0 transparent;

border-right: solid 0 transparent;

border-left: 1px solid #155799;

border-image: linear-gradient(#155799, #159957) 30 30;

}

下方是ios上的效果 (box1为第一种写法 box2为第二种写法)

2+

1.如需转载本站原创文章，请务必注明文章出处并附上链接，非常感谢。

2.本站用于记录个人 工作、学习、生活，非商业网站，更多信息请 点击这里

发表评论电子邮件地址不会被公开。

评论

姓名

电子邮件

站点