html中有序列表的background,纯css3有序列表

这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。

主要css代码：

.rounded-list a{

position: relative;

display: block;

padding: .4em .4em .4em 2em;

*padding: .4em;

margin: .5em 0;

background: #ddd;

color: #444;

text-decoration: none;

-moz-border-radius: .3em;

-webkit-border-radius: .3em;

border-radius: .3em;

-webkit-transition: all .3s ease-out;

-moz-transition: all .3s ease-out;

-ms-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

}

.rounded-list a:hover{

background: #eee;

}

.rounded-list a:hover:before{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

.rounded-list a:before{

content: counter(li);

counter-increment: li;

position: absolute;

left: -1.3em;

top: 50%;

margin-top: -1.3em;

background: #87ceeb;

height: 2em;

width: 2em;

line-height: 2em;

border: .3em solid #fff;

text-align: center;

font-weight: bold;

-moz-border-radius: 2em;

-webkit-border-radius: 2em;

border-radius: 2em;

-webkit-transition: all .3s ease-out;

-moz-transition: all .3s ease-out;

-ms-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

}