[移動端] 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;
    ……
  }

但願對你們有幫助。