只使用 CSS 建立靜態餅形元素需要了解特定的 CSS 屬性。
要建立代表特定百分比的元素 #2，請使用 CSS 屬性 conic-gradient。此屬性建立一個錐形漸變，其頂點位於父元素的中心。圓錐體的角度由百分比值決定，100% 代表一個完整的圓。
要管理不同百分比的元素#2 的形狀，請使用組合CSS 屬性：
要為圓餅圖製作動畫，請使用動畫屬性並定義一個from 狀態，將百分比設定為0. 透過逐漸增加百分比值，圓餅圖將逐漸填滿。
要實現圓形邊緣，請使用帶有兩個色標的徑向漸變。第一個停止在 98% 處創造微妙的高光，而第二個停止在 100% 處使用 #0000 創建清晰的邊界。應用遮罩或 -webkit-mask 選擇性地隱藏漸層的部分。
.pie {
--p: 20;
--b: 22px;
--c: darkred;
--w: 150px;
width: var(--w);
aspect-ratio: 1/1;
position: relative;
display: inline-grid;
margin: 5px;
place-content: center;
font-size: 25px;
font-weight: bold;
font-family: sans-serif;
}
.pie:before {
content: "";
position: absolute;
border-radius: 50%;
background:
radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}
.pie:after {
inset: calc(50% - var(--b)/2);
background: var(--c);
transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}以上是如何僅使用 CSS 建立百分比圓餅圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
