border-image 边框 图片
这个 属性 的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的 一个 很强大的 属性 ，因为它可以 自定义 漂亮的边框，而不在是单调的线条。
1. 官方解释
CSS 属性 允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性 所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。
2. 解释
通过 border-image 属性 可以给元素 添加 自定义 得而边框样式，而不单单是系统提供的那几种。换句话说就是我们可以 自定义 一个 图片 来充当元素的边框对它进行环绕。
3. 语法
border-image : source slice repeat ;
包含 属性
属性 描述 border-image-source 背景 图片 源 border-image-slice 需要展示出来 图片 的尺寸，如果这个量等于 图片 的尺寸就都相当于整个 图片 展示出来 border-image-width 图片 边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图片 的填充形式
4. 实例
使用 border-image 为元素 自定义 一个 图片 边框。
.demo {
width : px ;
height : px ;
background : #ccc ;
border-width : px ;
border-style : solid ;
border-image : url(./img/border-image.jpg) ;
}
效果 图
使用 `border-image` 为元素 自定义 一个 图片 边框 效果 图
我们这使用的是 bordr-image 这个 属性 ，并定义了 图片 路径 其它的不设定使用 默 认值。
使用 border-image-source 为元素设定 一个 边框。
.demo2 {
width : px ;
height : px ;
background : #ccc ;
border-width : px ;
border-style : solid ;
border-image-source : url(./img/border-image.jpg) ;
}
效果 图
使用 `border-image-source` 为元素设定 一个 边框 效果 图
我们可以看到 例1 和 例2 两个图是一样的，因为我们仅仅使用了 border-image-source 增加 了 图片 路径而已。
我们在 demo2 上 增加 border-image-slice 。
.demo2 {
width : px ;
height : px ;
background : #ccc ;
border-width : px ;
border-style : solid ;
border-image-source : url(./img/border-image.jpg) ;
border-image-slice : ;
}
效果 图
增加 `border-image-slice` 效果 图
通过给 slice 设定 一个 70 我们得到了 一个 漂亮的边框，下面重点说下这个 属性 值是如何作用在边框 图片 上的。
4. 继续在 demo2的基础上 增加 border-image-outset 。
.demo2 {
width : px ;
height : px ;
background : #ccc ;
border-width : px ;
border-style : solid ;
border-image-source : url(./img/border-image.jpg) ;
border-image-slice : ;
border-image-outset : px ;
}
效果 图
增加 `border-image-outset` 效果 图
从 效果 图中的红色箭头我们可以看到，边框 图片 和灰色元素之间有一条 2px 的白线，这是因为我设置了 image-outset 向外偏移 了 22px 的原因。
使用 border-image-repeat 来为 demo2 设定 图片 的填充形式
.demo2 {
width : px ;
height : px ;
background : #ccc ;
border-width : px ;
border-style : solid ;
border-image-source : url(./img/border-image.jpg) ;
border-image-slice : ;
border-image-outset : px ;
border-image-repeat : repeat ;
}
效果 图
使用 `border-image-repeat` 来为 demo2 设定 图片 的填充形式 效果 图 通过 效果 图我们可以看到 图片 是以平铺重复的方式来填充的，而这个 属性 默 认是 stretch 拉伸来填充 图片 的。这个 属性 还有以下值
属性 值 描述 stretch 默 认值，拉伸 图片 来填充区域。 repeat 平铺并重复图像来填充区域。 round 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 space 不拉伸 图片 ，而是让 图片 成四周环绕即左上右上右下左下。 initial 关键字用于设置 CSS 属性 为它的 默 认值 。可以用于任何 HTML 元素上的任何 CSS 属性 。 inherit 继承父级的设定
5. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 11 12+ 50+ 5+ 9.1+ 43+ 9.3+ 2.1+
6. 经验 分享
这个 属性 使用并不太难，不过其中的 border-image-slice 属性 在使用的时候有 一个 小技巧，就是当想要其中 image 不失真即不拉伸， slice 要和 width 一样。
例如：
.demo {
border-width : px ;
border-image-slice : ;
}
还有一点要注意的是 slice 不需要挂单位。
2. 如果想填充中心可以 加上 -webkit-border-image 就像下面这样
.demo {
-webkit-border-image : url(./img/border-image.jpg) stretch ;
}
这是 border-imgae 的连写方式，第 一个 和第二个 20 都是 slice ，认出它的最后 方法 就是 它们都不带单位。
7. 小结
border-image 使用时候一定要设定 border-style 虽然这个 属性 没什么用，但是如果不设定它 border-image 就不生效。 border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果 加上 px 反而会不生效。 border-width 用来设定边框的宽度，它决定 图片 边框展示的厚度(即围绕宽度)。
border-radius 圆角 ? ?border 边框查看更多关于borderImage 边框图片的详细内容...