上週五突然接到現場的一個需求,做一個行動端的勞模展示頁面。現場美工把原型圖發了過來。這個樣子的:
說實在的很想吐槽一下我們美工的審美哈,不過這不是重點。
因為邊框是需要特殊花紋的所以打算用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 完整版手冊
#以上是IOS頁邊框是顯示不出來怎麼辦? border-image實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!