border-image-repeat不同类型值效果示意实例页面

展示

代码

• HTML：

  <h4>初始值 stretch</h4>
  <div class="example"></div>
  
  <h4>border-image-repeat: repeat</h4>
  <div class="example example2"></div>
  
  <h4>border-image-repeat: round</h4>
  <div class="example example3"></div>
  
  <h4>border-image-repeat: space</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-repeat: repeat;
  }
  .example3 {
      border-image-repeat: round;
  }
  .example4 {
      border-image-repeat: space;
  }