CSS渐变统计柱形图
更新时间：2008年11月16日 01:56:30 作者：
以前写柱形图时,用的是宽1px的图片底,给width赋一个百分比出可以实现.昨天晚上写一个小统计时想用CSS写一个渐变的!
用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px)
本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地(看起来和1px的图片底没什么区别).下午时去网罗了一班.发现不占地是不太可能的.
要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></div>
依次从10%-100%，见不到效果,换<span></span>这个是可以不过在盒子内必须要有内容.
昨天晚上没写出来.下午google了也没有找到类4渐变的.不过从其中一个示例中得到了灵感.
URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55
中的:Complex CSS Bar Graph
马上得到了这个:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
有同需求的兄弟可以参考一下
相关文章
用css alpha 滤镜 实现input file 样式美化代码
用css alpha 滤镜 实现input file 样式美化代码...2007-12-12![当ie7不认!important之后 [布局的解决办法]](//img.jbzj.com/images/xgimg/bcimg1.png)
当ie7不认!important之后 [布局的解决办法]...2007-02-02
XHTML下用dl,dt,dd标签实现翻页的效果代码...2007-09-09
web标准常见问题集合4...2006-12-12
CSS中Float（浮动）相关技巧文章...2007-09-09
最近很少写CSS了，以后也可能写的会很少了，所以还是想把自已的一些经验能和大家分享一下，希望能给大家一些帮助！2008-09-09
ie中多id的调用方法...2007-03-03![[转]目前找到的最好的Iframe自适应高度代码](//img.jbzj.com/images/xgimg/bcimg7.png)
[转]目前找到的最好的Iframe自适应高度代码...2007-02-02
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu...2007-03-03
xhtml+css页面制作过程中问题的解决方案，说是解决方案应该有点过了，充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议，如果讲得不对的地方请多多包涵，当然也可以提出你们更好的方法，大家相互学习交流，共同成长！2008-10-10
![当ie7不认!important之后 [布局的解决办法]](http://img.jbzj.com/images/xgimg/bcimg1.png)
![[转]目前找到的最好的Iframe自适应高度代码](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论