html实现圆桶效果,CSS实现圆柱型数据报表的方法

本文实例讲述了CSS实现圆柱型数据报表的方法。分享给大家供大家参考。具体分析如下：

这里演示用CSS代码实现圆柱型数据报表效果的方法，实际上是用CSS控制背景图片的平铺范围，来达到圆柱体的高低效果，这只是一个比较简单的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(//img.jbzj.com/file_images/article/201505/2015512175921323.gif) center 1.6em no-repeat;

}

.chart li span {

display: block;

text-indent: -999em;

padding-bottom: 90px;

background: url(//img.jbzj.com/file_images/article/201505/2015512175912559.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%

运行效果如下图所示：

希望本文所述对大家的div+css网页设计有所帮助。