如何仅使用 css 制作圆形面包屑答案

【问题标题】：How to make a circle breadcrumb with only css如何仅使用 css 制作圆形面包屑
【发布时间】：2013-07-15 06:00:36
【问题描述】：

有没有人看到实现上述内容的可用 css3 解决方案？我想找到一种不需要图像的方法，也不想重写其他人可能已经解决好的东西。有人知道任何现有的解决方案吗？谢谢

【问题讨论】：

你在哪里找到的图片？你自己尝试过什么吗？看看 CSS border-radius
你有没有试过写一个固定大小的重复径向渐变？如果没有，请尝试一下。包括供应商前缀，最终结果可能实际上比 base64 编码的数据 URI 更大。
您可以使用border-radius 使元素为圆形，并使用inset box 阴影来赋予深度效果
@RobW A repeating-radial-gradient “重复色标”，而不是渐变。但也许它适用于 multiple background 渐变（而不是列表）。
@feeela "repeated" 在我的提示中是指background-repeat 属性，而"fixed size" 是指background-size。

标签： html css

【解决方案1】：

使用 CSS3 的 border-radius 属性非常简单：

LIVE DEMO

LIVE DEMO with a bit of CSS3 anim + jQuery

HTML

  <span class="btnz">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
  </span>

CSS：

.btnz>span{
  display:inline-block;
  width:10px;
  height:10px;
  background:#C0CCD7;
  border-radius:7px;
  border:1px solid #C0CCD7;
  border-top:1px solid #9DA7AF;
  margin:0 3px;
}
.btnz>span.active{
  background: #63C000;
  border: 1px solid #5FAF0E;
  border-bottom: 1px solid #39660F;
}

更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

【讨论】：

我不太喜欢这些边框的渲染，所以我编辑了你的 jsbin 以使用 box-shadow 代替（如我的回答中所建议的那样）。我觉得渲染效果更好。此外，我在活动的部分上添加了一个额外的亮点，只是为了炫耀；）jsbin.com/ojejuf/4/edit
@jods 你错过了cursor:pointer; 和其他疯狂的东西：jsbin.com/ojejuf/7/edit ;)
自从我发表评论以来，您已经工作了很多。甚至包括（一个）供应商前缀......干得好。 ;)
@jods hehehe ;) 你做得太好了！

【解决方案2】：

画布。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

画布画布画布画布画布。

编辑：好的，在所有的反对意见之后，这是一个替代答案....SVG。 :D

编辑编辑：没有文本的内联列表元素怎么样？

EDIT EDIT EDIT：说真的，border-radius 是一个不错的选择。

【讨论】：

“只有css”的哪一部分不清楚？您的回答大喊“画布”，甚至没有解释为什么应该使用它而不是 CSS。
请不要，不要用画布来做这么简单的事情。你最终会得到更多的代码，并且你将失去轻松处理点击和鼠标悬停的能力。
你当然没问题。这个怎么样？