博客园自定义设计（三）用css3自定义标签样式

直接贴代码：

.catListTag li {

		text-decoration:none;

		color:#000;

		background:#ffc;

		display:block;

		height:2em;

		margin:1em;

		width:10em;

		overflow:hidden;

		-moz-box-shadow:5px 5px 7px rgb(33,33,33,1);

		-webkit-box-shadow:5px 5px 7px rgb(33,33,1);

		box-shadow:5px 5px 7px rgb(33,33,1);

		-moz-transition: -moz-transform 0.25s liner;

		-o-transition:-o-transform 0.25s linear;

		-webkit-transition:-webkit-transform 0.25s linear;

	}

	



	.catListTag li:nth-of-type(even){

		-webkit-transform:rotate(14deg);

		-o-transform:rotate(14deg);

		-moz-transform:rotate(14deg);

		position:relative;

		top:5px;

	}

	.catListTag li:nth-of-type(3n){

		-webkit-transform:rotate(-3deg);

		-o-transform:rotate(-3deg);

		-moz-transform:rotate(-3deg);

		position:relative;

		top:-5px;



	}

	.catListTag li:nth-of-type(5n){

		-webkit-transform:rotate(5deg);

		-o-transform:rotate(5deg);

		-moz-transform:rotate(5deg);

		position:relative;

		top:-10px;

	}

	.catListTag li:hover,ul li:focus{

		-moz-box-shadow:10px 10px 7px rgb(0,0,0,7);

		-webkit-box-shadow:5px 5px 7px rgb(0,0,0,7);

		box-shadow:5px 5px 7px rgb(0,0,0,7);

		-webkit-transform:scale(1.1);

		-o-transform:scale(1.1);

		-moz-transform:scale(1.1);

		z-index:3;

	}

        #sidebar_toptags li{text-indent:2em}   

　　

 添加完毕后效果如下：

 

如果觉得角度太大，可以自己做下微调。