使用CSS實現可修改虛線長度的虛線邊框

最近美工提了一個問題，能不能修改虛線邊框的虛線長度？我一聽滿臉問號，我記得css的border不能設置虛線長度吧。抱着試一試的心態，我去stock overflow搜了一下，發現可以使用 background-image + background-position + background-size + background-repeat 實現這個需求。下面時一個簡單的示例：

.dashed-top {
  width: 100px;
  height: 100px;
  background-color: #000;  
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 20px 1px;
  background-repeat: repeat-x;
}

該示例會繪制一個寬高為 100px 、背景色為黑色的方塊，這個方塊的頂部有一條白色的虛線。

實現了第一條，剩下的就簡單了，只需復制粘貼並小小修改一下就能讓這個方塊被虛線包裹了。以下時實例代碼：

.dashed-top {
  width: 100px;
  height: 100px;
  background-color: #000;  
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to left, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to top, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}