首頁 > web前端 > H5教程 > 主體

IOS頁邊框是顯示不出來怎麼辦? border-image實例教程

零下一度
發布: 2017-05-12 12:02:50
原創
2503 人瀏覽過

上週五突然接到現場的一個需求,做一個行動端的勞模展示頁面。現場美工把原型圖發了過來。這個樣子的:

[移动端] 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板