border-image几个符合设计初衷效果实例页面

展示

代码

• HTML：

  <h4>1. 选项卡效果</h4>
  <p>源素材：<img src="./border-tab.png"></p>    
  <div class="border-tab">选项卡</div>
  <div class="border-tab">选项卡文字多</div>
  
  <h4>2. 圆角边框效果</h4>
  <p>源素材：<img src="./border-arc.png"></p> 
  <div class="border-arc">不填充</div>
  <div class="border-arc-fill">颜色填充</div>
  
  <h4>3. 多边框效果</h4>
  <p>源素材：<img src="./border-round.png"></p> 
  <div class="border-round">文字少</div>
  <div class="border-round">文字较多</div>

• CSS：

  .border-tab {
      display: inline-block;
      padding: 0 10px 5px;
      border-style: solid; border-width: 5px 5px 0px;
      border-image: url(./border-tab.png) 5 5 0 fill;     
  }
  .border-arc,
  .border-arc-fill {
      display: inline-block;
      padding: 0 10px;
      border: 10px double gray;
      border-image: url(./border-arc.png) 20;
  }
  .border-arc-fill {
      color: #fff;
      border-image-slice: 20 fill;
  }
  .border-round {
      display: inline-block;
      padding: 0 10px;
      border: 16px double gray;    
      border-image: url(./border-round.png) 16;     
  }