有没有人看到一个可用的 css3 解决方案来实现上述?我想找到一种不需要图像的方法,也不想重写其他人可能已经解决的问题。任何人都知道任何现有的解决方案?谢谢
问问题
3103 次
3 回答
4
使用CSS3的border-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 回答