iOS下border-image不起作用的解决办法

在实际开发过程中，如遇到有特殊纹路的border我们通常会用到border-image来实现。

实现如下： 

.borderStyle{

  border: 18px solid transparent;

  -moz-border-image: url(./images/popout_border.png) 18 18 stretch;

  -webkit-border-image: url(./images/popout_border.png) 18 18 stretch;

  -o-border-image: url(./images/popout_border.png) 18 18 stretch;

  border-image: url(./images/popout_border.png) 18 18 stretch;

  border-radius: @baseSpace * 4;

}

这样写发现Android能正常显示，IOS 却显示不出来。

解决方法： 

把 border 替换为单独的属性： 即border-style 和border-width;问题就解决了。

.borderStyle{

  border-style: solid;

  border-width: 18px;

  -moz-border-image: url(./images/popout_border.png) 18 18 stretch;

  -webkit-border-image: url(./images/popout_border.png) 18 18 stretch;

  -o-border-image: url(./images/popout_border.png) 18 18 stretch;

  border-image: url(./images/popout_border.png) 18 18 stretch;

  border-radius: @baseSpace * 4;

}