前端基础学习之css3-(border-image)实现边框图片自适应填充

border-image 属性允许在元素的边框上绘制图像。

语法：

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。(若上右下左四个方向的切割值一样，可以只写一个值)
border-image-width	图片边框的宽度。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
border-image-outset	边框图像区域超出边框的量。

demo:

• 1.原图：
  用这张图切割作为边框背景，不用工具测量都知道，只需要切割图片宽度/高度三分之一即可。

• 1.切割示意图
  

• 1.效果图：
  

        .box1{
            display: none;
            width: 200px;
            height: 200px;
            border: 20px solid rgb(116, 136, 76);
            border-image: url(img/border01.jpg) 167/20px round;
            /* 在内容变化的容器可以使用，边框自动填充 */
        }

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

• 2.原图：
  
  2.切割示意图
  
• 2.效果图
  

        .box2{
            margin-top: 20px;
            width: 300px;
            height: 200px;
            border: 20px solid yellowgreen;
            border-image-source: url(img/border2.jpg);
            border-image-slice: 43 42 38 41;
            border-image-width: 20px;
            border-image-repeat: round;
        }

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

• 3.原图
  

• 3.切割示意图
  

• 3.效果图
  

        .box3{
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: #f6f6f6;
            border: 20px solid yellowgreen;
            border-image-source: url(img/border4.jpg);
            border-image-slice: 80 72 75 72;
            border-image-width: 20px;
            border-image-repeat: round;
        }

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

以上三种的border-image-repeat都是round。下面对比一下round/repeat/stretch的区别。

• round 字面意思环绕 完整的自适应（等比缩放）平铺在边框内
• repeat 字面意思重复 从边框的中间向两侧平铺 自适应平铺但是不是完整的
• stretch 字面意思拉长 拉伸显示在边框内容 这样的效果是变形的

以第一张图片作为边框背景为例：

round:

repeat:

stretch: