如何让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/