以前寫直條圖時,用的是寬1px的圖片底,給width賦一個百分比出可以實現.昨天晚上寫一個小統計時想用CSS寫一個漸層的!
1.用作圖工具作一個漸層的長度.看起來能好看一點(寬:187px;高15px)
2.本來設想是當12%時,圖片從左到12%的位置顯示,餘下的88%不顯示,但不佔地(看起來和1px的圖片底沒什麼區別).下午時去網羅了一班.發現不佔地是不太可能的.
3.要隱藏圖片餘下的百分比,先想到了評分.亮和暗用了一張圖片,各占圖片總高度的一半.我寫下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></div>
依次從10%-100%，見不到效果,換<span></span>這個是可以不過在盒子內必須要有內容.
4.昨天晚上沒寫出來.下午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>
- <div style="width:5%;"></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:15%;"></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:25%;"><strong>55%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:35%;"><strong>55%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:45%;"><strong>55%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:55%;"><strong>55%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:65%;"><strong>65%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:75%;"><strong>75%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:85%;"><strong>85%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:95%;"><strong>95%</strong></div>
- </dd>
- </dl>
- <dl>
- <dd>
- <div style="width:100%;"><strong>100%</strong></div>
- </dd>
- </dl>
- </body>
- </html>
有同需求的兄弟可以參考一下
