border-image图片边框
一、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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux学习笔记24——进程管道
- 下一篇: [LoadRunner]UTF8字符格式