css3中border-image的使用

原文链接：点击打开链接

Border-image的学习：

border-image属性是css3中新增的属性，用于设置边框的背景图。以前这只border一般都是solid、dashed、dotted、double等等，通过这些属性添加相应的形状或者颜色，但是通过border-image可以设置边框的背景图片。

border-image : none | <image> [ <number> | <percentage>] {1,4} [ / <border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}

各个参数的意思：

1、none表示边框没有背景图片

2、<image> 设置border-image的背景图片，与background-image一样，都是通过url(...)来指定背景图片

3、<number> 是一个数值，用来设置边框的宽度，相当于border-width，单位为px，可以设置4个值，分别表示：上右下左

4、<percentage> 是一个百分比的值，用来设置边框的宽度，和<number>类似

5、stretch | repeat | round : 设置背景图片的铺放方式，stretch表示拉伸，为默认值，repeat表示重复，round表示平铺

上述是将border-image整体组合在一起，如果将border-image分开的话，会有如下属性：

1、border-image-source：引入图片路径

        border-image-source : url(image url);

2、border-image-slice：对图片进行切割

        border-image-slice : [<number> | <percentage> ]{1,4} && fill

        此属性用来分解引入进来的背景图片，<number>|<percentage>默认的单位就是像素，所以不需要添加任何单位，加了单位反而是错的，

        当使用百分比的时候是相对于背景图片而言的，例如背景图片大小为300px*200px,设置的百分比为10% 20% 30% 40% (用空格分隔)，对应的像素值为20px 60px 60px 120px

3、border-image-width：图片边框的宽度

4、border-image-repeat：图片的排列方式：

         [ stretch | repeat | round ]{1,2} border-image-repeat参数设置只接受一个或者2个参数，当只有1个参数的时候，表示水平、垂直方向排列方式相同； 当参数为2个的时候，第一个表示水平方向，第二个表示垂直方向；

border-image是将一张图切割4刀，切成了9部分，如上图所示，border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image四个边角部分，在border-image中是没有任何展示效果的，不会平铺，不会拉伸，只是正常展示，我们就把他们称作是盲区；而对应的border-top-image,border-right-image,border-bottom-image,border-left-image四个黄色区域在border-image中是属于展示效果的区域。上下区域border-top-image和border-bottom-image区域受到水平方向效果影响：如果是repeat则此区域图片会水平重复，如果是round则水平平铺；如果是stretch则被水平拉伸，示例如下：

水平round效果:

  .border-image {
    width: 150px;
    height: 100px;
    border: 27px solid orange;
  }
  .border-image-round {
     -webkit-border-image: url("../images/border.png") 27 round stretch;
     -moz-border-image: url("../images/border.png") 27 round stretch;
     -o-border-image: url("../images/border.png") 27 round stretch;
     border-image: url("../images/border.png") 27 round stretch;
   }

效果：

水平repeat效果

  .border-image-repeat {
    -webkit-border-image: url("../images/border.png") 27 repeat stretch;
    -moz-border-image: url("../images/border.png") 27 repeat stretch;
    -o-border-image: url("../images/border.png") 27 repeat stretch;
    border-image: url("../images/border.png") 27 repeat stretch;
  }

效果：

水平拉伸效果

   .border-image-stretch {
     -webkit-border-image: url("../images/border.png") 27 stretch round;
     -moz-border-image: url("../images/border.png") 27 stretch round;
     -o-border-image: url("../images/border.png") 27 stretch round;
     border-image: url("../images/border.png") 27 stretch round;
  }

效果：

上面分别展示了水平方向的区域作用效果，border-right-image和border-left-image和前面所讲的水平区域作用是类似的，只不过这两个参数是作用在垂直方向，换句话简单点说，border-right-image和border-left-image只能作用在垂直方向才有效果，同样round,repeat,stretch影响其作用效果，我们分别来看看和水平方向有什么共同之处和不同之处

垂直方向的round效果

 .border-image-round-val {
   -webkit-border-image: url("../images/border.png") 27 stretch round;
   -moz-border-image: url("../images/border.png") 27 stretch round;
   -o-border-image: url("../images/border.png") 27 stretch round;
   border-image: url("../images/border.png") 27 stretch round; 
 }

效果：

垂直方向的repeat效果

      
  .border-image-repeat-val {
    -webkit-border-image: url("../images/border.png") 27 stretch repeat;
    -moz-border-image: url("../images/border.png") 27 stretch repeat;
    -o-border-image: url("../images/border.png") 27 stretch repeat;
    border-image: url("../images/border.png") 27 stretch repeat; 
  }

效果：

垂直方向的stretch效果

      
 .border-image-stretch-val {
   -webkit-border-image: url("../images/border.png") 27 round stretch;
   -moz-border-image: url("../images/border.png") 27 round stretch;
   -o-border-image: url("../images/border.png") 27 round stretch;
   border-image: url("../images/border.png") 27 round stretch; 
 }

 

效果：

对于中间区块他是受到两个方向的作用，也就是说同时在水平和垂直两个方向进行round,repeat,stretch的作用。

1、Round效果：

 .border-image-round-hv {
   -webkit-border-image: url("../images/border.png") 27 round;
   -moz-border-image: url("../images/border.png") 27 round;
   -o-border-image: url("../images/border.png") 27 round;
   border-image: url("../images/border.png") 27 round; 
 }

 

效果：

前面我们说过，border-image背景图片被四刀一切分成九个部分，那么其中有四个部分成为盲区，不管什么排列方式，他都处惊不变的（border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image）,而border-top-image和border-bottom-image这两个部分是随着排列方式不同而效果不同，此处我们使用的是平铺，那么他们也只是在水平方向平铺；另外两个border-right-image和border-left-image只是在垂直方向进行平铺,中间部分同时在水平和垂直方向平铺，如下图所示：

2、Repeat效果

 .border-image-repeat-hv {
   -webkit-border-image: url("../images/border.png") 27 repeat;
   -moz-border-image: url("../images/border.png") 27 repeat;
   -o-border-image: url("../images/border.png") 27 repeat;
   border-image: url("../images/border.png") 27 repeat; 
 }

 

效果：

大家从效果图中可以看出在四条边的初始处和结尾片都有一个菱形显示不全，好像被切掉一样的，因为使用repeat和round不一样，round会压缩或伸展border-image的背景图片以其刚好适应border-width的宽度，从而正好在边框区域内显示，而repeat就不一样了，他不管什么适合不适合，直接居中重复，我个人认为repeat是边框中间向两端重复。因此大家可记住了：round平铺可能会改变边框背景图片大小来适应边框宽度排列，repeat重复是不改变背景图片大小而直接从中间向两端排列

3、Stretch效果

 .border-image-stretch-hv {
    -webkit-border-image: url("../images/border.png") 27 stretch;
    -moz-border-image: url("../images/border.png") 27 stretch;
    -o-border-image: url("../images/border.png") 27 stretch;
    border-image: url("../images/border.png") 27 stretch;
 }

 

效果：

原网站中还会很多例子，这个只是我在看文章时整理出来的笔记，用于自己学习，原文链接：点击打开链接

这里是用来进行演示的链接：链接