這里通過三個實例講解一下border-image:

原圖是這樣子的：

接下來我們使用border-image來處理這個圖片為邊框圖：

第一種：

代碼：

<div style=" background:#F4FFFA;width:100%; height:210px; border:41px solid #ddd; border-image:url(./imgs/333.png) 70 repeat "> </div>

第二種：

代碼：

<div style=" background:#F4FFFA;width:100%; height:210px; border:70px solid #ddd; border-image:url(./imgs/333.png) 70 round"> </div>

第三種：

代碼：

<div style=" background:#F4FFFA;width:100%; height:210px; border:70px solid #ddd; border-image:url(./imgs/333.png) 70 stretch"> </div>

總結

以上是生活随笔為你收集整理的border-image用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。