AI摘要

本文介绍了为子比主题添加七彩标签云样式的方法，只需两步：先添加Zibll标签云小工具并设置参数，再将指定的CSS代码加入主题自定义样式中，即可实现鼠标悬停时标签文字与背景在红橙黄绿青蓝紫七色间切换并高亮显示的效果。

给子比加一款新的标签样式代码，鼠标移动到标签云上会实现文字和背景切换颜色并高亮显示，内置了七中颜色，分别是：红橙黄绿青蓝紫，我感觉比原来的好看

先看效果图：

步骤一：使用小工具

打开小工具找到侧边栏，点击进去之后点击添加小工具选择Zibll标签云，然后就是参数了，因为追求工整选择了固定宽度，标签数量也选择了24个(3的倍数随意就好)

步骤二：CSS代码：

加入到主题后台的自定义CSS样式里保存即可

[hidecontent type="payshow"] 
/*文章随机彩色标签*/
.author-tag 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')";
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=1);
}

.author-tag a:nth-child(7n+1):hover{color:#ffffff; background-color:rgba(255,78,106,.8)}
.author-tag a:nth-child(7n+2):hover{color:#ffffff; background-color:#ffaa73}
.author-tag a:nth-child(7n+3):hover{color:#ffffff; background-color:#fed466}
.author-tag a:nth-child(7n+4):hover{color:#ffffff; background-color:#3cdc82}
.author-tag a:nth-child(7n+5):hover{color:#ffffff; background-color:#64dcf0}
.author-tag a:nth-child(7n+6):hover{color:#ffffff; background-color:#64b9ff}
.author-tag a:nth-child(7n+7):hover{color:#ffffff; background-color:#b4b4ff}

.author-tag a:nth-child(7n+1){background-color:rgba(255,78,106,.15); color:rgba(255,78,106,.8)}
.author-tag a:nth-child(7n+2){background-color:rgba(255,170,115,.15); color:#ffaa73}
.author-tag a:nth-child(7n+3){background-color:rgba(254,212,102,.15); color:#fed466}
.author-tag a:nth-child(7n+4){background-color:rgba(60,220,130,.15); color:#3cdc82}
.author-tag a:nth-child(7n+5){background-color:rgba(100,220,240,.15); color:#64dcf0}
.author-tag a:nth-child(7n+6){background-color:rgba(100,185,255,.15); color:#64b9ff}
.author-tag a:nth-child(7n+7){background-color:rgba(180,180,255,.15); color:#b4b4ff}
[/hidecontent]