我實作了帶有背景顏色的圓形進度條，如下所示：
但是當我嘗試使用相同的代碼但沒有背景顏色時，它變成了 PI 或矩形。我想實作這樣的：
但我所擁有的是：
如果我嘗試洗掉 bg 顏色，它會變成
我搜索了很多，但找不到任何解決方案。
這是我為此使用的代碼。
<!-- Progress bar -->
<div class="bar-container">
<div class="circular-progress" style="background: conic-gradient(#FFCAF0 <?php echo $percentage * 3.6; ?>deg, #003866 5deg);">
<div class="value-container"><?php echo $percentage; ?>%</div>
</div>
</div>
這是CSS代碼：
.bar-container {
background-color: #003866;
display: grid;
place-items: center;
}
.circular-progress {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress::before {
content: "";
display: block !important;
position: absolute;
height: 84%;
width: 84%;
background-color: #003866;
border-radius: 50%;
}
.value-container {
position: relative;
font-size: 20px;
color: #FFCAF0;
}
uj5u.com熱心網友回復：
您可以添加clip-path以“切出”內圈。
.bar-container {
background-image: url('https://invent.kde.org/plasma/breeze/-/raw/6d4fe7781790c69758be380324262261699894f7/wallpapers/Next/contents/images/1024x768.png');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
display: grid;
place-items: center;
padding: 20px;
}
.circular-progress {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
display: grid;
place-items: center;
background-image: conic-gradient(#FFCAF0 120deg, transparent 5deg);
clip-path: path('M20 100 a80 80 0 1 0 160 0 a80 80 0 1 0 -160 0 L0 100 L0 0 L200 0 L200 200 L0 200 L0 100 Z');
}
.value-container {
position: absolute;
top: 100px;
width: 100%;
text-align: center;
font-size: 20px;
color: #FFCAF0;
}<div class="value-container">33 %</div>
<div class="bar-container">
<div class="circular-progress"></div>
</div>您可以將background-image屬性移出 CSS 以通過 PHP 對其進行編輯（但我想您將不得不使用 JavaScript 來逐漸更改它）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/397091.html
標籤：javascript php html 查询 css