博客园自定义设计（三）用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}   

　　

 添加完毕后效果如下：

 

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

转载于:https://www.cnblogs.com/luochengqiuse/p/4616348.html