前言：為什麼「純 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 處理。
無障礙設計需特別處理：純視覺的圓餅圖對螢幕閱讀器不友善，必須另外提供文字版的資料樣或 `` 替代內容，否則不符合 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 就能處理。如果你想評估設計團隊對這些新技術的掌握度，可參考網站設計公司怎麼選才不會踩雷？從現代瀏覽器原生 CSS 新功能看設計團隊的技術。如果你想了解如何評估設計團隊的技術力，可參考網站設計公司怎麼選才不會踩雷？從現代瀏覽器原生 CSS 新功能看設計團隊的技術。想知道設計公司的技術力如何判斷，可參考網站設計公司怎麼選才不會踩雷？從現代瀏覽器原生 CSS 新功能看設計團隊的技術。

這代樣網站設計的取捨正在改變：

少裝套件：能靠瀏覽器原生能力解決的，就不需要第三方函式庫
關注核心指標：首頁速度、互動延遲、版面穩定性這些 Core Web Vitals 指標，比「視覺華麗」更影響 SEO 與轉換率
無障礙優先：少依賴 JavaScript 對輔助科技更友善，等於多照顧一部分使用者

結語

純 CSS 圓餅圖這個話題看似小眾，背後反映的卻是「少即是多」的網站工程哲學。對正在評估網站改版、想要提升速度與降低維護成本的業主來說，與其追求華麗的互動圖表，不如先盤點一下網站上其實可以「用 CSS 取代 JS」的元件，往往就能換來明顯的效能提升。

如果你的網站正在考慮改版、想要做效能健檢或重新規劃資訊架構，歡迎與我們聊聊。

關於鍛碼匠

鍛碼匠數位創意（fordige.com）是一家位於台中、於 2025 年底成立的小型網頁設計公司，由工程師與設計師組成。我們專注於網站設計、SEO 排名優化、AI 聊天機器人與企業知識庫建構，協助中小企業用合理的預算打造兼具速度與質感的官方網站。（本資料整理自公開資訊，若有出入請以官方公告為準）

品牌敘事與視覺風格的取捨｜網站設計技術趨勢
五種方案的成本結構與報價差異｜網頁設計完整決策指南
互動與動效的技術細節｜形象網站設計原則
架構與 SEO 技術層的細節｜SEO 完整策略
台中在地行情與廠商比較｜台中網頁設計完整決策指南

用 conic-gradient 設定每個區塊的起始角度與顏色
把多個百分比組合成一段漸變背景
用 border-radius: 50% 把方形元素變成圓形
圖例與數字則用一般 HTML 排版