前言：為什麼「純 CSS 圓餅圖」值得注意
如果你曾經請工程師在網站上做一個「產品銷售佔比」「預算分配」這類圓餅圖，報價單上很可能會出現 Chart.js、D3.js 或 ECharts 這類圖表函式庫。這些工具功能強大，但代價是：多一個 JavaScript 套件要下載、多一份授權要注意、首頁速度又被拖慢一截。
CSS-Tricks 近期刊出一篇文章《Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!》，探討如何用 純 CSS（搭配 CSS 變數、conic-gradient 等現代語法）畫出圓餅圖。這個話題對台灣中小企業的網站主來說，其實比想像中實用。
純 CSS 圓餅圖是怎麼做到的
傳統上畫圓餅圖需要 SVG 或 Canvas 搭配 JavaScript 計算每個扇區的角度。但 CSS 在這幾年新增了 conic-gradient() 這個背景漸變函式，可以直接從某個角度開始、用某種顏色畫到另一個角度，剛好對應到圓餅圖的扇形結構。
簡化的概念如下：
-
用
conic-gradient設定每個區塊的起始角度與顏色 -
把多個百分比組合成一段漸變背景
-
用
border-radius: 50%把方形元素變成圓形 -
圖例與數字則用一般 HTML 排版
整段過程完全不需要 JavaScript，瀏覽器看到的是純 CSS 規則，自然就渲染出圓餅圖。
對台灣業主的實際影響
1. 首頁載入速度變快
少一個 JavaScript 函式庫，代樣瀏覽器少下載一份檔案、少執行一段初始化程式。對行動裝置或網速較慢的使用者來說，差距可以非常明顯。Google 的 Core Web Vitals 也把「載入速度」列入 SEO 排名因素，純 CSS 方案在這項指標上佔有先天優勢。
2. 維護成本降低
套件會更新、會有資安漏洞、會停止維護，這些都是過去圖表函式庫常見的痛點。純 CSS 沒有版本衝突問題，網站改版時也不用擔心套件與新版框架不相容。
3. 適合的場景與不適合的場景
純 CSS 圓餅圖的甜蜜點是靜態、區塊數少（4 到 6 塊以內）、不需要互動的圖表，例如：
-
公司年報的營收結構
-
服務項目的市場分佈
-
靜態的預算配置示意
但如果你的圖表需要：滑鼠 hover 顯示數字、點擊下鑽到下一層、即時更新資料，那還是得回到 JavaScript 或 SVG 的方案。
從實務上看純 CSS 圓餅圖的限制
純 CSS 方案並非萬靈丹，技術上仍有幾個常見限制：
-
動態資料串接較麻煩：CSS 沒辦法像 JavaScript 那樣讀 API、即時把百分比套進
conic-gradient。要動態更新，得用後端模板或 CSS 變數配合 attribute selector 處理。 -
無障礙設計需特別處理：純視覺的圓餅圖對螢幕閱讀器不友善，必須另外提供文字版的資料樣或
<table>替代內容，否則不符合 WCAG 規範。 -
複雜圖表仍力有未逮：多層環圈圖、3D 圓餅圖、需要動畫過場的場景，純 CSS 寫起來會非常痛苦。
什麼時候該選純 CSS，什麼時候該用函式庫
「能用 CSS 解的就不要用 JS，但能用 JS 解的也不要硬撐。」
這句話是我們在評估前端技術時的判斷原則。實務上的決策邏輯大致如下：
-
資料靜態、不常更新、區塊少 → 純 CSS 圓餅圖，效能與維護成本最佳
-
資料動態、需要互動 → Chart.js、ECharts 等輕量函式庫，CP 值高
-
需要高度客製化、特殊動畫 → D3.js，彈性最大但開發成本也最高
這個趨勢反映的網頁設計方向
純 CSS 圓餅圖只是現代 CSS 能力的一個縮影。CSS 這幾年新增的 conic-gradient、@function、原生 CSS 巢狀、容器查詢（Container Queries）等功能，讓很多以前一定要靠 JavaScript 才能做到的事情，現在用純 CSS 就能處理。
這代樣網站設計的取捨正在改變：
-
少裝套件：能靠瀏覽器原生能力解決的，就不需要第三方函式庫
-
關注核心指標：首頁速度、互動延遲、版面穩定性這些 Core Web Vitals 指標，比「視覺華麗」更影響 SEO 與轉換率
-
無障礙優先：少依賴 JavaScript 對輔助科技更友善，等於多照顧一部分使用者
結語
純 CSS 圓餅圖這個話題看似小眾，背後反映的卻是「少即是多」的網站工程哲學。對正在評估網站改版、想要提升速度與降低維護成本的業主來說，與其追求華麗的互動圖表，不如先盤點一下網站上其實可以「用 CSS 取代 JS」的元件，往往就能換來明顯的效能提升。
如果你的網站正在考慮改版、想要做效能健檢或重新規劃資訊架構，歡迎與我們聊聊。
關於鍛碼匠
鍛碼匠數位創意（fordige.com）是一家位於台中、於 2025 年底成立的小型網頁設計公司，由工程師與設計師組成。我們專注於網站設計、SEO 排名優化、AI 聊天機器人與企業知識庫建構，協助中小企業用合理的預算打造兼具速度與質感的官方網站。 （本資料整理自公開資訊，若有出入請以官方公告為準）
延伸閱讀
- 網站設計公司怎麼選才不會踩雷？從 現代瀏覽器原生 CSS 新功能看設計團隊的技術:同樣談「網站設計」主題,延伸閱讀。
- 網站視覺設計趨勢完整解析：果凍感 UI × 便當盒佈局 × 12 個實戰案例:同樣談「網站設計」主題,延伸閱讀。
- CSS letter-spacing 文字揭露效果：讓你的網站文字動畫更細緻的 :同樣談「網站設計」主題,延伸閱讀。
- CSS sibling-index 與 sibling-count 教學：不用 :同樣談「網站設計」主題,延伸閱讀。
- SEO 排名優化服務:
