HTML之CSS画圆柱,CSS布局实现圆柱型数据报表效果

.chart {

font-family: Tahoma;

font-size: 12px;

border: 1px solid #ccc;

float: left;

margin: 0;

padding: .4em .1em;

}

.chart li {

list-style: none;

float: left;

width: 5em;

text-align: center;

background: url(/jscss/demoimg/200902/chart_bg.gif) center 1.6em no-repeat;

}

.chart li span {

display: block;

text-indent: -999em;

padding-bottom: 90px;

background: url(/jscss/demoimg/200902/chart_bg_ol.gif) center -1px no-repeat;

border-top: 5px solid #fff;

}

.chart strong {

display: block;

text-align: center;

font-weight: normal;

}

• 一月: 36%
• 二月: 56%
• 三月: 92%
• 四月: 48%
• 五月: 31%