原创|ripro怎么美化侧栏标签颜色添加彩色标签

原创|ripro怎么美化侧栏标签颜色添加彩色标签m.

效果图:

把以下代码加入到顶部css

 

*  标签美化
*/  
.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=20,Direction=335, 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}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注