border-image基本效果示意实例页面

展示

代码

• HTML：

  <h4>54切割</h4>
  <div class="example"></div>
  
  <h4>20切割</h4>
  <div class="example example2"></div>
  
  <h4>33.33% fill切割</h4>
  <div class="example example3"></div>
  
  <h4>默认</h4>
  <div class="example example4"></div>

• CSS：

  .example {
      width: 80px; height: 80px;
      border: 40px solid deepskyblue;
      border-image: url(./grid-nine.svg) 54;
  }
  .example2 {
      border-image-slice: 20;
  }
  .example3 {
      border-image-slice: 33.33% fill;
  }
  .example4 {
      border-image-slice: initial;
  }