CSS3:borderimage属性详解

语法介绍

border-image参数

border-image-source参数

属性名称:	border-image-source
值:	none |
初始值:	none

border-image-slice参数

border-image-slice&＃xff0c;指定边框图像顶部、右侧、底部、左侧内偏移量。其作用就是把边框图像切成9个区域&＃xff1a;4个角、4边区域和一个中间部位&＃xff0c;俗称称作9宫格&＃xff0c;其操作流程如下&＃xff1a;
图片用了w3c指定专用产品~一个81px的正方形位图&＃xff0c;9个菱形图案&＃xff0c;每个菱形图案为27*27px

左上角、右上角、右下角、左下角为4个橙色菱形&＃xff0c;顶部区域、右侧区域、底部区域、左侧区域为4个土黄菱形&＃xff0c;中间块&＃xff08;贱称第九区&＃xff09;为透明块。刚刚也说过了&＃xff0c;这个border-image-slice就是一个切片的作用&＃xff0c;把图像直接切开&＃xff0c;中间不留痕迹&＃xff0c;假如给定这个属性值&＃xff1a;border-image-slice:27 27 27 27 那么它代表的意思是距离顶部内偏移区域27px处横切一刀

接着距离右侧内偏移区域27px竖切一刀

紧接着距离底部内偏移区域27px横切一刀

接着距离左侧内偏移区域27px竖切一刀

那么给定图像切片border-image-slice:27 27 27 27完整动态图如下&＃xff1a;

这几刀下来把我分成了9个部分&＃xff0c;因此我被9宫格也就此由来

所以被切割的部位都分布在盒子边框这9个地方&＃xff0c;如上所示。

fill值是一个可选属性值&＃xff0c;假如指定这个值&＃xff0c;那么第九区就会出现&＃xff0c;假如不指定&＃xff0c;那么第九区域就被隐藏起来&＃xff01;

border-image-width参数

其作用是作用就是代替盒子本身的边框宽度border-width。假如指定&＃xff0c;那么边框图片宽度就由其来做主&＃xff0c;假如不指定&＃xff0c;那么图片边框宽度就由盒子的边框宽度来固定。

border-image-outset参数

起作用是让边框背景延伸到盒子外。

border-image-repeat参数

其作用就让边框背景是否重复&＃xff0c;默认值为stretch&＃xff0c;是拉伸的意思&＃xff0c;4个角4个区域分别做水平和垂直方向的拉伸&＃xff0c;来填补边框的间隙&＃xff1b;repeat是就是让4个角4个区域做完水平和垂直方向的复制图像&＃xff0c;做CTRL&＃43;V运动&＃xff0c;把边框之间的空隙填满&＃xff1b;而round[环绕]是把4个角和4个区域分成均等区域&＃xff0c;然后用背景图片切好能铺满整个边框空隙&＃xff0c;不能多也不能少&＃xff0c;正好合适。

参考链接

非常实用的border-image生成工具&＃xff1a;border-image-generator
参考文章&＃xff1a;css3&＃xff1a;border-image边框图像详解前端观察
参考文章&＃xff1a;CSS3 border-image详解、应用及jQuery插件