如何讓div或li的樣式看起來像這樣的進度條？

Question

我不知道這是叫什麼，所以我不能很好地標題這個問題。什麼我想要做的就是讓一個欄，顯示在一個過程什麼步驟已經完成，像這樣：

我不知道怎麼做這樣的效果，因爲我不不知道它叫什麼，我沒有找到任何例子或任何東西。

我該如何製作上圖中的東西？

Answer 1

它被稱爲Progress Trackers，它看起來類似於Breadcrumb導航，但它有不同的行爲和用途。

請參閱以下link以查看兩者之間的示例和差異。

請參閱以下tutorial以在純CSS中構建一個進度跟蹤器。

Answer 2

這裏開始與造型的好去處：http://css3button.net/81334

您要查找的是：

• 爲背景的CSS漸變：http://css-tricks.com/css3-gradients/

• 文本陰影上的文字

• 箱陰影集地內陷式的光細節

• 也許還有一些相當先進：和前：後樣式點： http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/