HTML5技术

[移动端] IOS下border-image不起作用的解决办法 - 小路_同学

字号+ 作者:H5之家 来源:H5之家 2017-05-02 12:04 我要评论( )

[移动端] IOS下border-image不起作用的解决办法 上周五突然接到现场的一个需求,做一个移动端的劳模展示页面。现场美工把原型图发了过来。这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点。 因为边框是需要特殊花纹的所以打算用border-i

[移动端] IOS下border-image不起作用的解决办法

上周五突然接到现场的一个需求,做一个移动端的劳模展示页面。现场美工把原型图发了过来。这个样子的:


说实在的很想吐槽一下我们美工的审美哈,不过这不是重点。

因为边框是需要特殊花纹的所以打算用border-image实现。

.example{ …… border:6px solid transparent; -webkit-border-image:url(../img/border_img.jpg) 6 6 round; border-image:url(../img/border_img.jpg) 6 6 round; …… }

最终发现安卓显示正常。IOS边框是显示不出来的。

解决办法是:
把 border:6px solid transparent; 替换为单独的属性,即:border-style 和 border-width。

.example{ …… border-style: solid; border-width: 6px; -webkit-border-image:url(../img/border_img.jpg) 6 6 round; border-image:url(../img/border_img.jpg) 6 6 round; …… }

希望对大家有帮助。

posted @

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    2017-04-16 11:00

  • 妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析 - 菜鸟先飞1992

    妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析 - 菜鸟先飞

    2017-03-28 11:01

  • 移动端默认样式重置 - ^.GTR

    移动端默认样式重置 - ^.GTR

    2017-03-27 17:00

网友点评