一、border-image的兼容性

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

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

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

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

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

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

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

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

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

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

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

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

三、應(yīng)用

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

轉(zhuǎn)載于:https://www.cnblogs.com/diyichen/p/11261597.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。