CSS3:border-image属性详解

语法介绍

border-image参数

属性名称:	border-image
值:	<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? ||<‘border-image-repeat’>
初始值:	详见各个属性
应用于:	所有元素，除表单元格 border-collapse 是 collapse外.
是否继承:	否
百分比:	N/A
媒体:	visual
计算值:	详见各个属性
动画:	详见各个属性

border-image-source参数

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

border-image-slice参数

属性名称:	border-image-slice
值:	[<number> | <percentage>]{1,4} && fill?
初始值:	none

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

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

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

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

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

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

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

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

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

border-image-width参数

属性名称:	border-image-width
值:	[ <length> | <percentage> | <number> | auto ]{1,4}
初始值:	1

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

border-image-outset参数

属性名称:	border-image-outset
值:	[ <length> | <number> ]{1,4}
初始值:	0s

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

border-image-repeat参数

属性名称:	border-image-repeat
值:	[ stretch | repeat | round ]{1,2}
初始值:	stretch

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

参考链接

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