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

border-style: dotted dashed solid double;

這將設(shè)置頂部的邊框樣式為點(diǎn)狀，右邊的邊框樣式為虛線，底部的邊框樣式為實(shí)線，左邊的邊框樣式為雙線。如下圖所示：

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

功能分析

基于封面圖分析實(shí)現(xiàn)這類虛線邊框應(yīng)該滿足一下幾個(gè)功能配置：

• 虛線的點(diǎn)數(shù)量
• 虛線的顏色，可以純色，多個(gè)顏色，漸變色
• 虛線的粗細(xì)程度
• 虛線點(diǎn)之間的間隔寬度

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

來(lái)到本文自定義圓形虛線邊框的關(guān)鍵部分，這里我們使用CSS mask 實(shí)現(xiàn)，并配合使用 -webkit-mask-composite: source-in 顯示元素本身的內(nèi)容。

-webkit-mask-composite: 屬性指定了將應(yīng)用于一個(gè)元素的多個(gè)蒙版圖像合成顯示。當(dāng)一個(gè)元素存在多重 mask 時(shí)，我們就可以運(yùn)用 -webkit-mask-composite 進(jìn)行效果疊加。

代碼實(shí)現(xiàn)

首先基于上面分析的幾個(gè)功能配置進(jìn)行變量定義，方便后續(xù)更改變量值即可調(diào)整邊框樣式。

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

對(duì)應(yīng)不同的元素傳入不同的值：

<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>

然后給偽元素設(shè)置基礎(chǔ)的樣式，定位，背景色，圓角等。

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

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

繼續(xù)設(shè)置在mask中設(shè)置一個(gè)重復(fù)的錐形漸變 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) 定義了漸變的起點(diǎn)，以虛線之間的距離除以2可以讓最終有對(duì)稱的效果
• #000 0 calc(360deg/var(--n) - var(--d))：定義了第一個(gè)顏色為黑色（#000），起點(diǎn)位置為0，終止位置為360deg/var(--n) - var(--d)度，基于虛線之間的距離和虛線的個(gè)數(shù)計(jì)算出每段虛線的漸變終止位置
• #0000 0 calc(360deg/var(--n))：定義了第二個(gè)顏色為透明色，起點(diǎn)位置為0，終止位置為基于虛線的個(gè)數(shù)計(jì)算，這樣與上一個(gè)顏色的差即是 --d 的距離，也就是我們控制虛線之間的距離。

基于上述代碼現(xiàn)在的界面是如下效果：

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

增加以下代碼到mask中：

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

注意這里使用了content-box作為背景盒模型，這意味著背景顏色只會(huì)應(yīng)用到元素的內(nèi)容區(qū)域，這段代碼將創(chuàng)建一個(gè)只在元素「內(nèi)容區(qū)域」的水平線性漸變背景，且是完全透明的背景色。

為什么是內(nèi)容區(qū)域，因?yàn)檫@里和padding有關(guān)聯(lián)，我們將定義的控制虛線的粗細(xì) --t:5px; 應(yīng)用到了偽元素的 padding 中。

padding: var(--t);

這樣剛剛新增的透明背景就只會(huì)應(yīng)用到下圖的藍(lán)色內(nèi)容區(qū)域，再結(jié)合 -webkit-mask-composite，即``只剩下 padding 部分的內(nèi)容，也就是我們的自定義邊框部分。

增加以下代碼：

-webkit-mask-composite: source-in;

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

都已經(jīng)到這一步了，是不是應(yīng)該再增加一些效果呢，給這個(gè)圓形的邊框增加動(dòng)起來(lái)的效果看看，增加一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫 animation: rotate 5s linear infinite;，這樣看著是不是更有感覺，適用的場(chǎng)景就多了。

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

最后

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