HTML 的 progress 標籤,與自訂樣式的方法

分享:
標籤: HTML CSS

progress 是 HTML5 之後提供的一個新的標籤,使用方法就是在上面設定 value 跟 max,就能自動顯示進度條百分比了。

<progress value="67" max="100"></progress>

 

要自訂樣式的話,要先清掉預設的樣式,才能去調整內容。

progress{
  -webkit-appearance: none;
  appearance: none;
}

接著透過 ::-webkit-progress-bar 與 ::-webkit-progress-value 就能調整樣式

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
    background: linear-gradient(to bottom, red , brown);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。

社團 社群