如何设置div或li的样式看起来像这个进度条？

Question

我不知道这叫什么，所以我无法很好地标题这个问题。我想要做的是创建一个显示流程中已完成步骤的栏，如下所示：

我不知道怎么做这种效果，因为我不知道它叫什么，我找不到任何例子或任何东西。

如何制作上图中的内容？

Answer 1

这是开始使用样式的好地方：http://css3button.net/81334

您正在关注的是：

• 背景的css渐变：http://css-tricks.com/css3-gradients/

文字
上的

• 文字阴影

• box-shadow 设置为插入灯光细节

• 可能还有一些相当高级的：之前和：之后的样式： http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

Answer 2

它被称为Progress Trackers，它看起来类似于Breadcrumb导航，但它具有不同的行为和用途。

请参阅以下link以查看两者之间的示例和差异。

请参阅以下tutorial以在纯CSS中构建进度跟踪器。