连续的图像边框

困难产生原因

• 图片边框随着 content 变化，会产生改变

图片方案

• 最上层是白色背景，用于放置内容，从 padding-box 开始渲染

• 下一层是图片，用于显示边框，从 border-box 开始渲染

  .box {
      border: 10px solid transparent;
      background: linear-gradient(white, white),
                  url('border.jpg');
      background-size: cover;
      background-clip: padding-box, border-box;
      background-origin: border-box;
  }

  

  .box {
      border: 10px solid transparent;
      background: linear-gradient(white, white) padding-box,
                  url('border.jpg') border-box 0 0 / cover;
  }

渐变边框

• 信封边框

  .box {
      border: 10px solid transparent;
      background: linear-gradient(white, white) padding-box,
                  repeating-linear-gradient(-45deg, 
                      red 0, red 12.5%,
                      transparent 0, transparent 25%,
                      #58a 0, #58a 37.5%,
                      transparent 0, transparent 50%
                  ) 0 / 10px 10px;
  }

  

• 动态选择框

  @keyframes ants {
      to { background-position: 100%; }
  }
  
  .box {
      border: 1px solid transparent;
      background: linear-gradient(white, white) padding-box,
                  repeating-linear-gradient(-45deg, 
                      black 0, black 25%, white 0, white 50%
                  ) 0 / 10px 10px;
      animation: ants 12s linear infinite;
  }