css3 border-image CSS3 border-image-source 属性

css3 border-image

CSS3 的 border-image 属性可以让我们使用图片来替代传统的边框，它可以让我们创建出更加丰富多彩的边框效果。

border-image 属性是一个复合属性，它由四个子属性组成：border-image-source、border-image-slice、border-image-width 和 border-image-outset。

border-image: source slice width outset; 

其中，border-image-source 是必须的，它用于指定要使用的图片。而 border-image-slice 用于指定图片分割的位置，可以是一个数字或者是一个表示分割位置的字符串。

 
border-image: url(images/myImage.png) 30 30 round;  // 表示将图片分割成30px*30px大小的九宫格，并使用圆角来连接九宫格之间的边界 

border-image-width 用于控制九宫格中各部分占据整个边界的大小（即原始图片中各部分占据整个图片大小的大小）。如果不想要九宫格中各部分占据整个边界大小相同（即原始图片中各部分占据整个图片大小相同），可以使用 border-width 属性来进行修正。

 
 border: 10px solid;   // 这里表示将原始图片中所有都都扩展10px  
 

最后一个子属性是 border-image-outset ，它用于在原始边界外再扩充一圈区域。这里需要注意的是如果想要在原始边界外再扩充一圈区域时不能使用 padding 来代替 border （padding 是内间距而不是外间距）。

CSS3 border-image-source 属性

div
{
  border-image-source: url(border.png);}

border-image-source: none|image;