如何在CSS中繪制帶有缺口的圓環(huán)效果？

巧用css打造帶缺口的圓環(huán)效果

本文介紹一種高效的CSS方法，實現(xiàn)帶缺口的圓環(huán)效果，并可靈活調(diào)整缺口角度。 這種效果常用于界面設(shè)計中，需要在圓環(huán)內(nèi)或缺口處放置其他元素。 以往的方法，例如使用透明邊框或?qū)盈B旋轉(zhuǎn)，在處理小于90度的缺口時顯得較為復(fù)雜。

本文推薦使用conic-gradient (錐形漸變) 和 mask (遮罩) 配合 radial-gradient (徑向漸變) 的方案，簡潔高效地解決此問題。

以下代碼展示了如何創(chuàng)建一個帶90度缺口的藍(lán)色圓環(huán)：

.ring {   width: 200px;   height: 200px;   background: conic-gradient(     transparent 0deg,     transparent 270deg,     #3498db 270deg,     #3498db 360deg   );   -webkit-mask: radial-gradient(transparent 60%, black 61%); /* Safari */   mask: radial-gradient(transparent 60%, black 61%); }

conic-gradient 定義了圓環(huán)的形狀和顏色。transparent 0deg, transparent 270deg 創(chuàng)建了透明的缺口區(qū)域（0度到270度），#3498db 270deg, #3498db 360deg 則定義了藍(lán)色的圓環(huán)部分（270度到360度）。 radial-gradient 作為遮罩，確保圓環(huán)內(nèi)部保持透明，方便放置其他內(nèi)容。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

調(diào)整缺口角度只需修改 conic-gradient 中的角度值。例如，要創(chuàng)建一個45度缺口，將代碼修改為：

background: conic-gradient(   transparent 0deg,   transparent 315deg,   #3498db 315deg,   #3498db 360deg );

這種方法簡單易懂，且能精確控制缺口角度和圓環(huán)顏色，是創(chuàng)建帶缺口圓環(huán)效果的理想方案。 它避免了傳統(tǒng)方法的復(fù)雜性，并能更好地適應(yīng)各種背景顏色和設(shè)計需求。