css3边框-图片

border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，
也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。
虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。
特别注意，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

border-image: url("/images/border.png") 30 30 repeat;

1. border-image-source 使用一张图片代替边框样式，默认为none

/* the image.jpg is used as image */
border-image-source: url(image.jpg);

/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);

2. border-image-slice :
通过border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。