主要属性
边框背景的主要属性有：
- border-image-source:
设置作为边框背景的图片源；
- border-image-slice:
设置要将边框背景图片进行“切割”的分割方式。形式为：
border-image-slice: 数值 [fill]; //特别注意：这里的数值不带单位！
其中“数值”可以是1-4个值，分别代表上右下左4个方向的“切割厚度”。
fill代表“填充”，用于中间区域填充到盒子内容区。
- border-image-width:
设置图片边框的宽度，也可以设定1-4个值。
通常设定为auto（自动），此时就会使用border-image-slice所设定的切割厚度。
- border-image-repeat:
设置边框背景的填充方式，可以设定1-2个值，表示横向和纵向的填充方式。
可用值如下：
stretch： 指定用拉伸方式来填充边框背景图，这是默认值，也最常用，推荐使用。
repeat： 指定用重复平铺方式来填充边框背景图。类似背景图的repeat，背景图不改变大小。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
注：有的浏览其中应用边框图属性需同时设定border属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box1,.box2{
width: 100px;height: 50px;
border: 10px solid red;
/* 图片来源 */
border-image-source: url('../code/images/button.png');
/* 切割厚度 */
border-image-slice: 9 11 12 11 fill;
/* 图片边框的宽度 */
border-image-width: auto;
/* 拉伸 */
border-image-repeat: stretch;
}
.box2{
width: 50px;
height: 25px;
}
</style>
</head>
<body>
<div class="box1">测试1<br>文字</div>
<div class="box2">测试2</div>
</body>
</html>