首页  >  文章  >  web前端  >  IOS页面边框是显示不出来怎么办?border-image实例教程

IOS页面边框是显示不出来怎么办?border-image实例教程

零下一度
零下一度原创
2017-05-12 12:02:502463浏览

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

[移动端] IOS下border-image不起作用的解决办法0
说实在的很想吐槽一下我们美工的审美哈,不过这不是重点。

因为边框是需要特殊花纹的所以打算用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;
    ……
  }

希望对大家有帮助。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上是IOS页面边框是显示不出来怎么办?border-image实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn