CSS渐变统计柱形图

ttx9n · 发表于 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%，见不到效果,换这个是可以不过在盒子内必须要有内容.
昨天晚上没写出来.下午google了也没有找到类4渐变的.不过从其中一个示例中得到了灵感.
URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55
中的:Complex CSS Bar Graph
马上得到了这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> dl{margin:0;padding:0;width:187px;} dd{position:relative;display:block;float:left;width:187px;height:15px; margin:0;border:1px solid #eee;} * html dd{ float: none; } dd div{position:relative;background:url("../image/default/Percent.gif");height:15px;width:100%;text-align:right;} </style> </head> <body> <dl> <dd> </dd> </dl> <dl> <dd> </dd> </dl> <dl> <dd> 55% </dd> </dl> <dl> <dd> 55% </dd> </dl> <dl> <dd> 55% </dd> </dl> <dl> <dd> 55% </dd> </dl> <dl> <dd> 65% </dd> </dl> <dl> <dd> 75% </dd> </dl> <dl> <dd> 85% </dd> </dl> <dl> <dd> 95% </dd> </dl> <dl> <dd> 100% </dd> </dl> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
有同需求的兄弟可以参考一下

123456 · 发表于 2022-8-31 11:06:06

收下来看看怎么样

溪谷玉贤 · 发表于 2022-12-4 04:33:56

撒房产税陈飞飞

kestlhoxn · 发表于 2023-3-31 21:42:52

看看看看看看看看看看看看看看看看看看看看看看看看看看看

q42obh · 发表于 2023-7-20 23:41:01

vcxvcxv

7jbiiz · 发表于 2023-8-25 09:01:07

收下来看看怎么样

4k0mp7m · 发表于 2023-9-10 12:12:47

而快乐你们快乐马年快乐

溪谷玉贤 · 发表于 2023-9-20 04:05:31

很不错的源码论坛

回复用户1 · 发表于 2023-10-19 00:57:15

554411515451555

e8hwl6prw · 发表于 2023-11-23 14:27:24

激动人心，无法言表！

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] CSS渐变统计柱形图

相关帖子