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

Question

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

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

我怎样才能做出像上图那样的东西？

Answer 1

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

您正在查看的是：

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

• 文本上的文本阴影

• box-shadow为灯光细节设置为 inset

• 也许还有一些非常先进的:before和:after样式： http ://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

Answer 2

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

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

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