重复线性渐变与条纹边框效果实例页面

展示

代码

• HTML：

  <div class="stripe-border"></div>

• CSS：

  .stripe-border {
      width: 150px; height: 200px;
      border: 20px solid;
      /* IE，旧语法 */
      border-image: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 6px, white 7px, white 12px) 20;
      /* 新语法 */
      border-image: repeating-linear-gradient(135deg, deepskyblue 0 6px, white 7px 12px) 20;
  }