Wordpress標籤美化,柒比貳7b2主題標籤美化:美化顏色、背景色、鼠標選中的效果
演示站:www.dungei.com
以wordpress主題爲例,以下css代碼,放入主題css文件內即可,可根據自己的需求調整顏色等
注意:要根據自己主題的調整類名稱
更多教程,請進入盾給站長社區交流
/*
* 標籤美化
* 版權來自:盾給網絡
* www.dungei.com
*/
.tagcloud a{
position: relative;
padding: 1px 4px 2px 4px;
margin: 0px 4px 0px 3px;
border: 1px solid #e6e7e8;
border-radius: 18px;
text-decoration: none;
white-space: nowrap;
-o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";/*兼容ie7/8*/filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=1);
/*strength是陰影大小,direction是陰影方位,單位爲度,可以爲負數,color是陰影顏色 (儘量使用數字)使用IE濾鏡實現盒子陰影的盒子必須是行元素或以行元素顯示(block或inline-block;)*/
}
.tagcloud a:nth-child(7n+1):hover{color:#ffffff;background-color:rgba(255,78,106,.8)}
.tagcloud a:nth-child(7n+2):hover{color:#ffffff;background-color:#ffaa73}
.tagcloud a:nth-child(7n+3):hover{color:#ffffff;background-color:#fed466}
.tagcloud a:nth-child(7n+4):hover{color:#ffffff;background-color:#3cdc82}
.tagcloud a:nth-child(7n+5):hover{color:#ffffff;background-color:#64dcf0}
.tagcloud a:nth-child(7n+6):hover{color:#ffffff;background-color:#64b9ff}
.tagcloud a:nth-child(7n+7):hover{color:#ffffff;background-color:#b4b4ff}
.tagcloud a:nth-child(7n+1){background-color:rgba(255,78,106,.15);color:rgba(255,78,106,.8)}
.tagcloud a:nth-child(7n+2){background-color:rgba(255,170,115,.15);color:#ffaa73}
.tagcloud a:nth-child(7n+3){background-color:rgba(254,212,102,.15);color:#fed466}
.tagcloud a:nth-child(7n+4){background-color:rgba(60,220,130,.15);color:#3cdc82}
.tagcloud a:nth-child(7n+5){background-color:rgba(100,220,240,.15);color:#64dcf0}
.tagcloud a:nth-child(7n+6){background-color:rgba(100,185,255,.15);color:#64b9ff}
.tagcloud a:nth-child(7n+7){background-color:rgba(180,180,255,.15);color:#b4b4ff}
原文地址:http://www.dungei.com/4390.html