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强制换行 css强制不换行的css方法可以参考本站的内容页的文章控制.2007-12-12
浅谈href=#与href=javascript:void(0)的区别
浅谈href=#与href=javascript:void(0)的区别，需要的朋友可以参考一下2013-02-02
每一张网页都仅加载自己需要的CSS可提高开发效率，提高维护效率，提高网页加载效率。2008-09-09
不错的使iframe透明的方法不用每次都要改iframe里的背景颜色了2008-08-08
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。2008-03-03
在制作网页中，我们经常需要用到下面的css，有朋友整理好的特给大家，大家可以看看，一定要记住2008-08-08
本文主要介绍html5手机触屏touch事件，简单举例，需要的朋友可以参考下。2016-06-06
其实和跟border的属性一样的东西，做网页的朋友熟练利用下面的样式，就可以做出漂亮的边框效果2008-09-09
比较经典的分页样式代码，主要是多数字分页2008-06-06
在Firefox2中某些情况下输入框虽然可以输入，但在获取焦点时没有文本输入光标的显示，这个是非常恶心的bug，非常容易让表单使用者有一种不能输入的错觉，即使后来尝试知道可以输入，但也无法判断光标定位在哪儿。2008-05-05
最新评论