html - 如何仅使用 CSS 制作圆形面包屑

Question

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

Answer 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