3

在此处输入图像描述

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

4

3 回答 3

4

使用CSS3border-radius属性非常简单:

在此处输入图像描述

现场演示

带有一点 CSS3 动画 + jQuery 的 LIVE DEMO

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

于 2013-07-16T21:18:15.163 回答
0

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

每个点只创建一个 <div>(或任何元素,可能是一个链接 <a>)。

让它变圆:使用border-radius. 通过使圆角半径为 div 的高度/宽度的一半,您将得到一个圆。

顶部(处于非活动状态)或底部(处于活动状态)3d 照明效果可以非常简单地用box-shadow: inset ....

从我在您的图像中看到的,选择正确的颜色,就是这样,差不多。

于 2013-07-16T21:12:15.503 回答
-3

帆布。

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

帆布 帆布 帆布 帆布。

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

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

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

于 2013-07-16T21:13:35.947 回答