CSS如何使用錐形漸變和徑向漸變繪制并切除圓環？

css巧妙繪制并裁剪圓環

網頁設計中，經常需要繪制復雜的圖形，例如：如何用CSS繪制一個圓環，并精確裁剪掉一部分，同時保持圓環內部和裁剪區域的透明性？這在需要為其他元素預留空間時尤其常見。

需求分析

我們需要一個可自定義裁剪角度的圓環，圓環內部必須透明，以便容納其他內容，裁剪區域同樣需要透明。 角度并非固定為90度，而是可靈活調整。

解決方案：巧用漸變與遮罩

利用CSS的錐形漸變(conic-gradient)和徑向漸變(radial-gradient)，可以完美實現這一效果。

1. 錐形漸變構建圓環: conic-gradient 允許我們創建從中心向外輻射的漸變效果，從而輕松繪制圓環，并通過控制角度實現裁剪。

   立即學習“前端免費學習筆記（深入）”；

2. 徑向漸變作為遮罩: radial-gradient 創建從中心向外漸變的顏色效果，將其作為遮罩(mask)，可以隱藏圓環的特定部分，達到裁剪效果。

代碼示例：

.circular-ring {   width: 200px;   height: 200px;   border-radius: 50%;   background: conic-gradient(     from 0deg,     #333 0deg,     #333 270deg,     transparent 270deg,     transparent 360deg   );   -webkit-mask: radial-gradient(#000 60%, transparent 61%);   mask: radial-gradient(#000 60%, transparent 61%); }

此代碼創建了一個200×200像素的圓環。conic-gradient 生成一個270度深灰色圓環，其余部分透明。radial-gradient 則作為遮罩，確保圓環內部和裁剪部分透明。

進階技巧

• 小角度裁剪: 對于小于90度的裁剪角度，可以考慮疊加多個旋轉角度不同的圓環來實現。

• 復雜背景: 如果背景復雜，可以使用clip-path()裁剪顯示區域，并設置與背景相同的顏色。

• 最佳方案: conic-gradient 和 radial-gradient 的組合是實現此效果的最佳方案，兼顧效率和靈活度。

通過此方法，我們可以靈活控制圓環顏色和裁剪角度，滿足各種設計需求。