CSS如何制作餅圖？下面本篇文章手把手教你使用CSS制作動(dòng)態(tài)餅圖，希望對(duì)大家有所幫助！

餅圖是常見(jiàn)的組件，可讓你顯示整體的各個(gè)部分，你可以將它們用于許多不同的場(chǎng)景。 你會(huì)發(fā)現(xiàn)很多關(guān)于構(gòu)建這樣一個(gè)組件的文章，但它們通常要么依賴于 SVG，要么依賴于大量的 HTML 元素。在這篇文章中，我將向你展示如何使用 CSS 和僅一個(gè)元素創(chuàng)建一個(gè)餅圖。

接下來(lái)我們制作一個(gè)靜態(tài)餅圖，一個(gè)動(dòng)畫(huà)餅圖，我們也可以有圓角。然而所有這一切都只有一個(gè)<div>元素。

除此之外，我們可以使用 CSS 變量輕松調(diào)整不同的值，因此我們不必為更改 CSS 代碼而煩惱。

餅圖的 HTML 結(jié)構(gòu)

正如我上面提到的，我們有一個(gè)單一的<div>，我們添加百分比值（餅圖的進(jìn)度）作為主要內(nèi)容：

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

我們還將 CSS 變量添加為內(nèi)聯(lián)樣式。

• --p：這個(gè)變量應(yīng)該包含百分比值作為一個(gè)數(shù)字（不帶%符號(hào)）。它應(yīng)該與內(nèi)容相同。
• --b：這個(gè)變量將定義邊框的粗細(xì)。
• --c：這個(gè)變量將定義主要顏色。

為了本文和演示，我使用單字符變量來(lái)保持代碼簡(jiǎn)短。但在生產(chǎn)環(huán)境中使用代碼時(shí)，最好考慮更明確的變量。示例：--percentage、--border-thickness和--main-color。

餅圖的 CSS 設(shè)置

我們首先從樣式化我們的內(nèi)容開(kāi)始。這部分很簡(jiǎn)單，代碼如下：

.pie {   --w: 150px;   width: var(--w);   aspect-ratio: 1;   display: inline-grid;   place-content: center;   margin: 5px;   font-size: 25px;   font-weight: bold;   font-family: sans-serif; }

我將元素定義為inline-grid使用place-content: center. 我們aspect-ratio: 1用來(lái)確保元素保持方形。我們也可以使用height: var(--w)，但學(xué)習(xí)和使用新的 CSS 屬性總是好的。

你可能想知道為什么我使用變量來(lái)定義寬度而不是簡(jiǎn)單地設(shè)置 width: 150px. 我需要知道寬度的值以備將來(lái)使用，因此我將其定義為變量。

剩下的所有 CSS 都是非?；镜奈谋緲邮?。隨意更新它。

讓我們繼續(xù)討論有趣的部分——我們組件的主要形狀。為此，我們將使用具有以下樣式的偽元素：

.pie:before{   content: "";   position: absolute;   border-radius: 50%;   inset: 0;   background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); }

一個(gè)覆蓋所有區(qū)域的偽元素，position: absolute這要?dú)w功于inset: 0. 是的，它又是一個(gè)新的 CSS 屬性，它是top, right, bottom, and的簡(jiǎn)寫(xiě)right。

您可以在此處閱讀