语法介绍
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生成工具：
参考文章： 参考文章：