虛線相信大家日常都用的比較多，常見的用法就是使用 border-style 控制不同的樣式，比如設置如下邊框代碼：

border-style: dotted dashed solid double;

這將設置頂部的邊框樣式為點狀，右邊的邊框樣式為虛線，底部的邊框樣式為實線，左邊的邊框樣式為雙線。如下圖所示：

border-style 除了上面所支持的樣式還有 groove ridge inset outset 3D相關的樣式設置，關于 border-style 的相關使用本文并不過多介紹，有興趣的可以看官方文檔。本文主要介紹使用CSS漸變實現更自定義化的虛線邊框，以滿足需求中的特殊場景使用。如封面圖所示的6種情況足以體現足夠自定義的邊框樣式，接下來看實現方式。

功能分析

基于封面圖分析實現這類虛線邊框應該滿足一下幾個功能配置：

• 虛線的點數量
• 虛線的顏色，可以純色，多個顏色，漸變色
• 虛線的粗細程度
• 虛線點之間的間隔寬度

由于我們是自定義的虛線邊框，所以盡可能不增加額外的元素，所以虛線的內容使用偽元素實現，然后使用定位覆蓋在元素內容的上方，那么你肯定有疑問了，既然是覆蓋在元素的上方，那不上遮擋了元素本身嗎？

來到本文自定義圓形虛線邊框的關鍵部分，這里我們使用CSS mask 實現，并配合使用 -webkit-mask-composite: source-in 顯示元素本身的內容。

-webkit-mask-composite: 屬性指定了將應用于一個元素的多個蒙版圖像合成顯示。當一個元素存在多重 mask 時，我們就可以運用 -webkit-mask-composite 進行效果疊加。

代碼實現

首先基于上面分析的幾個功能配置進行變量定義，方便后續更改變量值即可調整邊框樣式。

--n:20;   /* 控制虛線數量 */
--d:8deg; /* 控制虛線之間的距離 */
--t:5px;  /* 控制虛線的粗細 */
--c:red;  /* 控制虛線的顏色 */

對應不同的元素傳入不同的值：

<div class="box" style="--n:3;--t:8px;--d:10deg;--c:linear-gradient(45deg,red,blue)">3</div>
<div class="box" style="--n:6;--t:12px;--d:20deg;--c:green">6</div>

然后給偽元素設置基礎的樣式，定位，背景色，圓角等。

.box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--c);
}

按不同的元素傳入不同的背景色，最終的效果是這樣的。

繼續設置在mask中設置一個重復的錐形漸變 repeating-conic-gradient，代碼如下：

repeating-conic-gradient(
  from calc(var(--d)/2),
  #000 0 calc(360deg/var(--n) - var(--d)),
  #0000 0 calc(360deg/var(--n))
)

• from calc(var(--d)/2) 定義了漸變的起點，以虛線之間的距離除以2可以讓最終有對稱的效果
• #000 0 calc(360deg/var(--n) - var(--d))：定義了第一個顏色為黑色（#000），起點位置為0，終止位置為360deg/var(--n) - var(--d)度，基于虛線之間的距離和虛線的個數計算出每段虛線的漸變終止位置
• #0000 0 calc(360deg/var(--n))：定義了第二個顏色為透明色，起點位置為0，終止位置為基于虛線的個數計算，這樣與上一個顏色的差即是 --d 的距離，也就是我們控制虛線之間的距離。

基于上述代碼現在的界面是如下效果：

上面有提到 -webkit-mask-composite 是應用于一個元素的多個蒙版圖像合成顯示，所以我們這里需要在mask中再增加一個蒙板進行合成最終的效果。

增加以下代碼到mask中：

linear-gradient(#0000 0 0) content-box

注意這里使用了content-box作為背景盒模型，這意味著背景顏色只會應用到元素的內容區域，這段代碼將創建一個只在元素「內容區域」的水平線性漸變背景，且是完全透明的背景色。

為什么是內容區域，因為這里和padding有關聯，我們將定義的控制虛線的粗細 --t:5px; 應用到了偽元素的 padding 中。

padding: var(--t);

這樣剛剛新增的透明背景就只會應用到下圖的藍色內容區域，再結合 -webkit-mask-composite，即``只剩下 padding 部分的內容，也就是我們的自定義邊框部分。

增加以下代碼：

-webkit-mask-composite: source-in;

即是最終的效果，因為這里增加的mask背景是透明色，這里 -webkit-mask-composite 的屬性不限制使用 source-in， 其他的好幾個都是一樣的效果，有興趣的可以了解了解。

都已經到這一步了，是不是應該再增加一些效果呢，給這個圓形的邊框增加動起來的效果看看，增加一個簡單的旋轉動畫 animation: rotate 5s linear infinite;，這樣看著是不是更有感覺，適用的場景就多了。

碼上掘金在線預覽： https://code.juejin.cn/pen/7231427066804535352

最后

到此整體代碼實現就結束了，看完是不是感覺挺簡單的，基于偽元素設置錐形漸變 repeating-conic-gradient并配合-webkit-mask-composite實現自定義圓形虛線邊框的效果。這里是設置了 border-radius:50%; 圓角最終呈現的是圓形，有興趣的可以更改CSS代碼試試其他的形狀顏色間距等。