CSS 進(jìn)度條是用來(lái)展示某項(xiàng)任務(wù)的進(jìn)度情況的一個(gè)常用工具。顏色是進(jìn)度條最關(guān)鍵的一個(gè)屬性，下面就來(lái)講講如何為進(jìn)度條設(shè)置顏色。

/* 線(xiàn)性漸變色進(jìn)度條 */
progress[value] {
width: 200px;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: #ddd;
border-radius: 10px;
}
progress[value]::-webkit-progress-value {
background-image: linear-gradient(to right, #63B8FF, #FFB6C1);
border-radius: 10px;
}
/* 線(xiàn)性漸變色+百分比文字進(jìn)度條 */
progress[value] {
width: 200px;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: #ddd;
border-radius: 10px;
}
progress[value]::-webkit-progress-value {
background-image: linear-gradient(to right, #63B8FF, #FFB6C1);
border-radius: 10px;
}
progress[value]::after {
content: attr(value);
position: absolute;
right: 0;
bottom: -20px;
font-size: 12px;
color: #666;
}

上述代碼中，我們使用了 ::-webkit-progress-value 為進(jìn)度條設(shè)置了線(xiàn)性漸變色。在線(xiàn)性漸變色中，to right 表示從左到右漸變。其中 #63B8FF 是進(jìn)度條顏色的起點(diǎn)，#FFB6C1 是終點(diǎn)，可以根據(jù)需要進(jìn)行更改。

除此之外，我們還為進(jìn)度條設(shè)置了圓角，美化了進(jìn)度條的界面。如果要為進(jìn)度條添加文字，可以使用 ::after 偽元素，利用 content 屬性為進(jìn)度條添加文字。