上周五突然接到現(xiàn)場的一個需求，做一個移動端的勞模展示頁面。現(xiàn)場美工把原型圖發(fā)了過來。這個樣子的：

說實在的很想吐槽一下我們美工的審美哈，不過這不是重點。

因為邊框是需要特殊花紋的所以打算用border-image實現(xiàn)。

  .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;      ……    }

最終發(fā)現(xiàn)安卓顯示正常。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原創(chuàng)html5視頻教程