css3中的border-image

css3中的border-image

兼容性：

首先：参数解读！

border-image: 有六个属性值!

border-image-source:图片地址；

border-image-slice:图片切片；

border-image-图片宽度；

border-image-ourset:图片外凸；

border-image-repeat:图片重复方式；

border-image-soure:none | <image>

初始值为：none；假如设置了none，那么我们的盒子边框就会应用 border-style 的值

如果要引入外部链接：url（yy/xx.jpg）;

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

初始值：none；

fill为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理。

写法和margin的简写是一样的：

margin:20px;(上下左右各20px)

margin:20px 40px;(上下20px  左右40px)

margin:20px 40px 60px；(上20px  左右40px  下60）

margin:20px 40px 60px 80px;(上 右 下 左)

指定边框图像上 右 下 左 内偏移量；可以使用百分比（em无效），原理如下：

被分隔的图像只能在边框宽度（border-width）内活动；

我们使用的图片：（没个小方格是27|26）

     

css:（至于重复模式：我们先设置为默认的后面再详解）

  .demo{
      width:100px;
      height:100px;
      border:27px;
      border-image:url(images/border.png) 27;
      -webkit-border-image:url(images/border.png) 27;
  }

demo1 当border的宽度大于被切割出来的图片时；（border:40px）

demo2 当border的宽度小于被切割出来的图片时；(border:10px)

demo3 当border的宽度等于切割出来的图片时；(border:27px)

 

结论：

四个顶角的变化其实是带有拉伸功能的，当然假如说盒子边框和被切图片宽度相等，那么这样就不会有拉伸的效果

border-image-width：[<length>|<percentage>|<number>|auto]{1,4}

初始值：1

 作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由我来做主，假如不指定，那么图片边框宽

 度就由盒子的边框宽度来固定

.border-image{ 
            border:20px solid #000;  /*盒子边框宽度为20px*/
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; /*边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，           因此这些值将代替20px成为图片边框宽度。*/
}

 demo css:（没有设置border属性），没有设置border,那么元素会向内部偏离：占据context；

  .demo{
      width:140px;
      height:140px;
      border-image:url(images/border.png) 27;
      -webkit-border-image:url(images/border.png) 27;
      border-image-width:27px 40px 4px 27px;
      -webkit-border-image-width:27px 40px 4x 27px;
  }

效果：

   

就算没有设置border属性，盒子模型中还是出现了3px的边框滴呀；一般建议：还是先这是我们border比较好滴呀

背景是向context中“深入” 了滴一呀；

border-image-outset：[ <length> | <number> ]{1,4}

作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离；

具体的我们看代码的效果图；

  .demo{
      width:140px;
      height:140px;
      border:27px;
      border-image:url(images/border.png) 27;
      border-image-outset:27px 27px 27px 27x;
      -webkit-border-image:url(images/border.png) 27;
      -webkit-border-image-outset:27px 27px 27px 27x;
  }

理论上说：当设置了border-image-outset之后，图片的会紧贴着外部显示的，但是：目前各大浏览器暂时不支持该属性；

border-image-repeat:[ stretch | repeat | round ]{1,2}

初始值:stretch

作用：是用来设置边框的重复方式；默认值是stretch，是拉伸的意思；

这里解释一下round（环绕）是把四个角和4个区域分成均等的区域，然后然后用切好的背景去填充该区域滴呀；

  .demo{
      color:black;
      width:140px;
      height:140px;
      border:27px;
      border-image:url(images/border.png) 27 stretch; /*repeat round*/
      -webkit-border-image:url(images/border.png) 27 stretch; /*repeat round*/

  }

           

它本来是两个参数的，分别代表：水平方向上的和垂直方向上的（一般情况下，两个方向上的重复方式都采用同一种）

所以，我们的css也可以这么写的滴呀；

.demo{
      color:black;
      width:140px;
      height:140px;
      border:27px;
      border-image:url(images/border.png) 27 stretch repeat; /*水平方向上拉伸，垂直方向上重复显示*/
      -webkit-border-image:url(images/border.png) 27 stretch repeat; /*水平方向上拉伸，垂直方向上重复显示*/
  }

效果：