1、边框背景概述
1.1 border-image-source
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。
1.2 border-image-slice
border-image -slice属性指定图像的边界向内偏移。
值
说明
number
数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像)
%
百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
fill
保留图像的中间部分
1.3 border-image-repeat
值
描述
stretch
默认值。拉伸图像来填充区域
repeat
平铺(repeated)图像来填充区域。
round
类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
1.4 border-image-width
border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。
值
描述
length
距离多少像素
percentage
百分比
number
边框宽度多少倍数
1.5 border-image-outset
border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。
值
描述
length
距离多少像素
percentage
百分比
number
边框宽度多少倍数
2、背景裁剪
border-image-slice ：上、右、下、左。
边框背景图剪裁
3、边框背景重复效果
源代码
边框背景重复效果
.borderImage{
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: stretch;
}
.borderImageRepeat{
margin-top: 50px;
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: repeat;
}
.borderImageRound{
margin-top: 50px;
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: round;
}
border-image-repeat: stretch;
border-image-repeat: repeat;
repeat简单粗暴，会有不完整的情况。
border-image-repeat: repeat;
round会拉伸压缩比repeat效果好。
运行效果:
背景图重复
