css中的border-style渲染結(jié)果固定，并且不同瀏覽器中的表現(xiàn)也可能不一樣，這帶來許多不便。

例如，有時候我們希望圓點(diǎn)邊框更加密集，然而此間距與border-width綁定。

這類邊框，需要全邊聯(lián)動的效果，才不顯得突兀。因此，我們可以借助SVG中stroke的良好可自定義性，通過background繪制邊框。

此“邊框”由裁切的四部分互相補(bǔ)充而成，他們在形狀上是完全相同的，但位置不一樣，因此可以在裁切后完美組合起來。不使用單個矩形是因?yàn)槭褂肅SS設(shè)置樣式(calc)在SVG中兼容性不佳，并且雙calc()會出現(xiàn)問題，否則我們可以直接繪制一個固定邊距的矩形。

我們可以通過stroke-linecap（線帽形狀）、stroke-dasharray（虛線長度）、stroke-width（線寬）改變形狀，通過rx、ry和border-radius應(yīng)用圓角。

例如，在此處，線帽為圓形，虛線長度為0px，間隔為12px，線寬為12px，因此呈現(xiàn)出數(shù)個圓點(diǎn)。同時僅保留每個部分的一角。