一、border-image的兼容性

? ? ? ?1、支持到IE11以上，其他主要瀏覽器均支持

? ? ? ?2、使用webkit以后支持android4.3以上

二、border-image的參數（包括圖片、裁剪位置、重復性）

? ? ? ?1、圖片（border-image-source）采用url（）調用，可以是相對/絕對路徑 ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ?2、圖片的裁剪位置（border-image-slice） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

? ? ? ? ? ? 1>參數沒有單位，專指像素。border-image：url（a.png）27 repeat;? ?這里27指27px ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

? ? ? ? ? ? ?2>支持百分比，百分比大小相對于邊框圖片而言 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ?3>裁剪特性，效果的實現上類似于九宮格裁剪，有1~4個參數，方位符合CSS普遍的方位規則（上右下左，順時針） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?border-image：url（border.png）30 % ?35% 40% ?30% ?repeat;? ? ?

在圖片上部30%的地方裁剪一下，在右部35%的地方裁剪一下，在底部40%的地方裁剪一下，在左部30%的地方裁剪一下。形成了九個分離區域——九宮格

? ? ? ? 3、重復性（border-image-repeat）參數0~2個，2個參數一個水平，一個垂直

? ? ? ? ? ? 這里重復與background的背景重復，差異較大。background圖片的重復包括：重復、不重復、水平重復、垂直重復。對于border-image而言包括：repeat（重復）、round（平鋪）、stretch（拉伸），其中stretch是默認值。

三、應用

? ? ? ? 1、 使用時注意需要border-style存在，單單設置border-image是不會生效的

轉載于:https://www.cnblogs.com/diyichen/p/11261597.html

總結

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

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