建站
咨詢
售后
建站咨詢
新聞中心
虛線相信大家日常都用的比較多，常見的用法就是使用 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 進行效果疊加。
代碼實現
首先基于上面分析的幾個功能配置進行變量定義，方便后續(xù)更改變量值即可調整邊框樣式。
--n:20; /* 控制虛線數量 */
--d:8deg; /* 控制虛線之間的距離 */
--t:5px; /* 控制虛線的粗細 */
--c:red; /* 控制虛線的顏色 */對應不同的元素傳入不同的值：
3
6然后給偽元素設置基礎的樣式，定位，背景色，圓角等。
.box::after {
content: "";
position: absolute;
border-radius: 50%;
background: var(--c);
}按不同的元素傳入不同的背景色，最終的效果是這樣的。
繼續(xù)設置在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作為背景盒模型，這意味著背景顏色只會應用到元素的內容區(qū)域，這段代碼將創(chuàng)建一個只在元素「內容區(qū)域」的水平線性漸變背景，且是完全透明的背景色。
為什么是內容區(qū)域，因為這里和padding有關聯，我們將定義的控制虛線的粗細 --t:5px; 應用到了偽元素的 padding 中。
padding: var(--t);這樣剛剛新增的透明背景就只會應用到下圖的藍色內容區(qū)域，再結合 -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代碼試試其他的形狀顏色間距等。
分享題目：CSS小技巧之圓形虛線邊框
鏈接分享：http://m.5511xx.com/article/cdchjie.html
