css3 border-img

 

CSS3 边界图片

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：

border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

在 div 中使用图片创建边框:

实例

在 div 中使用图片创建边框

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
 

语法    border-image是复合属性，省略的值为他们默认值

border-image: source（图片位置） slice（偏移） width（图片边界宽度） outset repeat|initial|inherit;

 

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

 

 border-image-slice

 

用于规定图片的切割位置。

语法结构:

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

默认值是100%。

number：纯数值，不能够带单位，默认单位是像素(px)。支持百分比

percentage：相对于图片的尺寸。

number和percentage都可以有1-4个值，取值方式与border-width相仿，遵循上右下左顺序。

下面介绍一下它是如何具体切割图片，先看一个图片：

每一个小方块尺寸是27px，那么整个图片的尺寸是81(27*3)像素。

slice翻译成中文是切割、划分的意思，裁切方式是向内进行切割，如果有如下代码：

1	border-image-slice:27px 27px 27px 27px

第一个27px是从图片上边缘向内27px进行切割。

第二个27px是从图片右边缘向内27px进行切割。

第三个27px是从图片下边缘向内27px进行切割。

第四个27px是从图片左边缘向内27px进行切割。

切割演示图片如下：

上面以动态方式演示了是如何对图片进行切割。

图片被切割后，划分为九个区域，与元素的九个区域一一对应。

介绍一下元素九个区域，CSS代码如下：

 

div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-width:20px;
  border-color:blue red;
}

 

上述生成带有边框的div元素，具有潜在的九个区域，图示如下：

边框图片九个区域与元素九个区域一一对应，也就是边框图片的相应部位就应用于元素的相应位置。

意思就是说，由slice设定上右下左要切割多个像素所得的九宫格，对应着border本身的九宫格区域位置，中间默认丢弃

 

 

 一一对应

 

fill关键字如果存在的话，将会保留border-image中间的部分（预设是丢弃中间部分，留空处理）。

 

border-image-width

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

这个属性默认是边框的宽度，用来限制相应区域背景图的范围，
首先相应背景区域的图像会根据这个属性值进行缩放。然后再重复或平铺或拉伸。
在复合写法中应该位于 slice属性 和repeat属性中间 用“/”间隔

如：border-image:url(border.png) 27 / 6em /outse/ repeat;

 

border-image-outset

就是把原来的贴吧向外延伸不能为负值

 

border-image-repeat

取值为repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch(拉伸)，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复）。

关于round 和repeat 的区别。
round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。 具体效果看文章后边的例子。

4、实际渲染规则

通过裁切属性值，将边框背景图切出了“九宫格”的模型，那这张背景图怎么对应地贴在div的边框上呢？

<————————>

• 如图 在border-image中的橙红色的四个边角只会呆在border的四个角,并且水平和垂直方向均被拉伸来填充border的四个角。
• 如图 上下区域即border-top-image和border-bottom-image受到第一个参数——水平方向效果影响：如果为repeat，则此区域被水平重复(round水平平铺，stretch水平拉伸)来填充对应的上下border【该区域在垂直方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框水平方向上进行重复或平铺或拉伸】
• 左右区域border-left-image和border-right-image 的作用效果亦然【该区域在水平方向上首先会按所对应的border-image-width的值等比缩放，然后再按参数设置在边框垂直方向上进行重复或平铺或拉伸】

---

---

---

我们用下图(27×3)px *(27×3)pxpng 做实验，我给不同部位加了一个序号做标志，便于观察。

    // 加一个蓝色背景的父级，便于我们分析效果。
    .border_image {
        width: 400px;
        height: 115px;
        border: 3em double orange;
        -webkit-border-image: url(border.png) 27 round;
        border-image: url(border.png) 27 round;
    }
    .box {
        background: blue;
    }

    <div class="box">
        <div class="border_image"></div>
    </div>

 

round效果如下

---

   //去掉重复属性，即默认都为stretch
   border-image: url(border.png) 27;

stretch效果如下

---

  //使用repeat
  border-image: url(border.png) 27 repeat;

repeat效果如下

    //边框宽度改变
    border-image: url(border.png) 27 repeat stretch;
    border-width: 3rem 1rem;

repeat stretch效果如下