3.3 CSS3图片边框属性
border-image效果在CSS2中，只有使用背景图片来制作，而且制作过程非常复杂，做完后也很难维护。如今CSS3中增添了一个图片边框的属性，能够模拟出background-image属性的功能，功能比background-image强大，我们可以使用border-image属性给任何元素（除border-collapse属性值为collapse的table元素之外）设置图片效果边框。
3.3.1 border-image属性的语法及参数
border-image : none | <image> [<number> | <percentage>] {1, 4} [/ <border-width>] {1, 4} ] ? [stretch | repeat | round] {0, 2}
none：默认值，表示边框无背景图片。<image>：设置背景图片，这跟background-image一样，可以使用绝对或相对的URL地址，来指定边框的背景图片。<number>：number是一个数值，用来设置边框或者边框背景图片的大小，其单位就是像素(px)，可以使用 1~4 个值，表示4个方位的值，可以参考border-width的设置方式<percentage>：percentage也是用来设置边框或者边框背景图片的大小，跟number不同之处是，percentage使用的是百分比。stretch、repeat、round：这三个属性参数是用来设置边框背景图片的铺放方式，类似于background-repeat，其中stretch会拉伸边框背景图片、repeat是会重复边框背景图片、round是平铺边框背景图片，其实stretch为默认值。
border-image和background-image之间有一些类似之处，包括图片的引用和排列方式。
3.3.2 border-image属性使用方法
- 引入背景图片：
border-image-source。 - 切割引入北京图片：
border-image-slice。 - 边框图片的宽度：
border-image-width。 - 边框背景图片的排列方式：
border-image-repeat。
1、border-image-source
语法：
border-image-source : url(image url); //image url可以是相对地址也可以是绝对地址。
2、border-image-slice
语法：
border-image-slice : [<number> | <percentage>] {1, 4} && fill ?
border-image-slice是用来分解引入进来的背景图片。
1) 取值支持 <number> | <percentage>。其中number是没有单位的，因为其默认的单位就是像素。除了直接用number来设置外，还可以使用百分比值来表示，即相对于边框背景图片而言的。
2）剪切的特性(slice)。在border-image中slice是一个关键部分，也是让人难以理解的部分。
这里可以参考w3cplus border-image了解更多。
3、border-image-width
语法：
border-image- [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width就是border-width，用来设置边框的宽度，我们也可以直接用border-width来代替border-image-width的。
4、border-image-repeat
语法：
border-image-repeat: [ stretch | repeat | round ]{1,2}
border-image-repeat是用来指定border-image的排列方式，这个属性设置参数和其他的不一样，border-image-repeat不遵循top,right,bottom,left的方位原则，他只接受两个（或一个）参数值，第一个表示水平方向，第二个表示垂直方向；当取值为一个值时，表示水平和垂直方向的排列方式相同。同时其默认值是stretch，如果你省略不取值时，那么水平和垂直方向都是以stretch排列。
上面我们把
border-image像background-image一样分解开给大家介绍了其相关的知识点，但是在实际应用中，我们不是能分解的，必须写在一起，如果大家细心的话，从上面那些简单实例中就能发现，下面我将其正确的速记法列出来以供大家参考
border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
3.3.3 浏览器兼容性
3.3.4 border-image属性的优势
略
3.3.5 实战体验：按钮圆角阴影效果
略（p100-p105） 太长了/(ㄒoㄒ)/~~ 有兴趣的可以到这里学习参考