echarts的边框图片之切图（重要）

 图片边框代码写法，先贴两对代码，均是经过测试可用的都可以实现效果，顺便贴上背景图

  

第一对代码

  <div class="boxbig">
    <div class="container">
      处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦汗滴禾下土谁知盘中餐粒粒皆苦
    </div>
    <div class="container">
      处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦处处闻啼鸟夜来风雨声花落知多少锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦汗滴禾下土谁知盘中餐粒粒皆苦
    </div>
  </div>


  .boxbig {
    display: flex;
  }

  .container {
    width: 417px;
    height: 300px;
    border: 12px solid;
    border-image-source: url(./border.png);
    border-image-slice: 54;
    /* 这个属性默认的是border的宽度 ，但是有区别，这个是边框图片的宽度，不会挤压文字  */
    border-image-width: 49px;
    border-image-repeat: round;
    margin-right: 20px;
  }

第二对代码 

  <!-- HTML代码 父容器大盒子 --> 
<div class="viewport">
    <div class="column">
      <div class="panel">
        <div class="inner">123</div>
      </div>
    </div>
  </div>


 /* css代码  公共面板样式 */
  .panel {
    width: 417px;
    height: 300px;
    position: relative;
    border: 15px solid transparent;
    border-width: 51px 38px 20px 132px; 
    border-image-source: url(./border.png);
    border-image-slice: 51 38 20 132;
  }

  .inner {
    position: absolute;
    top: -2.6375rem;
    left: -7.65rem;
    right: -1.475rem;
    bottom: -0.25rem;
    padding: 0.3rem 0.45rem
  }

下面记录下图片边框切法

最重要的边框图片的四个属性 

/*指定图片的路径 */

• border-image-source: url(border.png);

/*这个数字是图片切割的高度，第一个格子....，上右下左，记住，一定不要加单位,border-image -slice属性指定图像的边界向内偏移。 */

着重介绍下这个属性是怎么切图的

上下左右四个角，以最大的那个角的高度切，可以设置%，数值不加单位

• border-image-slice: 50% 50%;

/*如果我们给了边框的宽度（border-width），我们就不用再给边框图片的宽度（border-image-width）了，会默认和边框宽度一样这个属性默认的是border的宽度 ，但是有区别，border-image-width这个是边框图片的宽度，不会挤压文字，border会挤压文字  */

• border-image-width: 49px;

border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）

• border-image-repeat: round;

附上一篇css参考手册的链接，里面附带动图可以更直观的理解切图

CSS3 border-image-slice 属性 | 菜鸟教程CSS3 border-image-slice 属性 实例 指定图像的边界向内偏移： [mycode3 type='css'] div { border-image-source: url(border.png); border-image-slice: 50% 50%; } [/mycode3] 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..https://www.runoob.com/cssref/css3-pr-border-image-slice.html