如何僅使用 CSS 建立百分比圓餅圖？

只使用 CSS 的百分比圓餅圖

只使用 CSS 建立靜態餅形元素需要了解特定的 CSS 屬性。

元素 # 2 建立

要建立代表特定百分比的元素 #2，請使用 CSS 屬性 conic-gradient。此屬性建立一個錐形漸變，其頂點位於父元素的中心。圓錐體的角度由百分比值決定，100% 代表一個完整的圓。

百分比值管理

要管理不同百分比的元素#2 的形狀，請使用組合CSS 屬性：

• conic-gradient：調整圓錐體的角度以匹配
• clip-path: 使用圓形剪輯路徑來限制圓錐曲線漸變的可見區域。這可以確保形狀對於小百分比和大百分比都能正確顯示。

動畫

要為圓餅圖製作動畫，請使用動畫屬性並定義一個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中文網其他相關文章！