border-image实现不规则背景图片的切图

需要用到的背景图片

背景图片

实现效果

宽度为800px的效果
宽度为1000px效果

一张背景图，通过css3中的 border-image 样式就可以实现背景的宽高的自适应。

实现重点在于border尺寸的设置：

border-image-width

//html
<div class="box">
    <div class="content">
            所以被切割的部位都分布在盒子边框这9个地方，如上所示。
对应的，被分隔的图像只能在边框宽度（border-width）内活动，
什么意思呢，比如盒子边框为border-width:54px分割图片为border-image-slice:27，
因为图像4个顶角的宽度和高度都只有27px，但是盒子的边框是54px，
因此图片就要被水平方向和垂直方向拉伸到切好跟盒子边框宽度等同，
即27px的图像拉伸到54px停止，再往前就不行了！这点上，跟 鑫哥 的
解释有点不太一样，因为他觉得这个是视觉中盲点，被分隔的顶角图像
只是分配到边框的4个顶角，不会平铺，不会重复、不会拉伸（这点跟
我说得不符合），引用原文如下：
    </div>
</div>

//css
<style>
       body{
           background:#050d22;
           color: #fff;
        }
      .box{
            width: 1000px;
            margin: 50px auto;
            line-height: 1.5;
            border-width: 40px 380px 115px 310px;
            border-style: solid;
            border-color: transparent;
            border-image: url(bg.png) 40 380 115 310 fill round;
            box-sizing: border-box;
      }
      .content{
            margin-left: -270px;
            margin-right: -356px;
            margin-bottom: -80px;
      }
    </style>