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

---

有没有人见过一个可用的css3解决方案来实现上述功能？我想找到一种不需要图像的方法，也不需要重写别人可能已经很好解决的东西。有人知道现有的解决方案吗？谢谢

对不起，我没有现成的实施建议。但在现代浏览器上实现它应该不会太难

每个点只创建一个（或任何元素，可能是一个链接）

要使其成为圆形：请使用

边界半径

。通过使圆角半径为div高度/宽度的一半，您将得到一个圆

顶部（处于非活动状态）或底部（处于活动状态）3d照明效果可以非常简单地用

框阴影：插入…

进行模拟

根据我在您的图像中看到的内容，选择正确的颜色，差不多就是这样。

画布

帆布帆布

编辑：好的，在所有的否决票之后，这里有一个备选答案……SVG:D

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

---

编辑：说真的，边界半径是一个很好的方法。

使用CSS3的

边界半径属性非常简单：




HTML

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

更多信息请点击此处：
您在哪里找到图像的？你自己试过什么吗？看看CSS
边界半径
你是否尝试过编写一个固定大小的重复径向渐变？如果没有，试试看。包括供应商前缀，最终结果实际上可能比base64编码的data-URI更大。您可以使用边界半径使元素成为圆形，并使用插入框阴影来提供depth@RobWA“重复颜色停止”，而不是渐变。但它可能适用于渐变（而不是列表）。@feeela“repeated”在我的提示中指的是
background repeat
属性，“fixed size”指的是
background size
。“only css”的哪一部分不清楚？你的答案是“canvas”，甚至没有解释为什么应该用它来代替CSS。请不要用canvas来做这么简单的事情。你将得到更多的代码，你将失去轻松处理点击和鼠标移动的能力。当然，你没事。这个怎么样
我不太喜欢这些图形上的边框渲染，因此我编辑了您的jsbin以使用方框阴影（如我在回答中所建议的）。我认为渲染效果更好。另外，我在活动屏幕上添加了一个额外的亮点，只是为了炫耀；）@缺少的作业
光标：指针和其他疯狂的东西：；）自从我发表评论以来，你已经做了很多工作。甚至包括（一）个供应商前缀。。。干得好@乔兹：嘿嘿；）你干得太好了！
.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;
}