文章标签自动分配颜色

发布于 2022-03-20  459 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

今日发现一个主题的随机彩色标签很好看,心思思的今天去扒掉CSS回来给自己用XD

当鼠标指向它的时候,底色是黑色。

Sakura主题 直接复制下面CSS代码 放入style.css 文件中即可 ,其他主题可自己修改标签来适应。

/*文章随机彩色标签*/
.post-tags{
border-radius: 10px;
    padding: .3em 1em;
    margin-bottom: 10px
}.post-tags a{
    padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block
}.post-tags a:nth-child(5n){
border-radius:10px;
    padding: .3em 1em;
    background-color: #4A4A4A;color: #FFF
}
.post-tags a:nth-child(5n+1){
border-radius: 10px;
    padding: .3em 1em;
    background-color: #ff5e5c;color: #FFF
}
.post-tags a:nth-child(5n+2){
border-radius: 10px;
    padding: .3em 1em;
    background-color: #ffbb50;color: #FFF
}
.post-tags a:nth-child(5n+3){
border-radius: 10px;
    padding: .3em 1em;
    background-color: #1ac756;color: #FFF
}
.post-tags a:nth-child(5n+4){
border-radius: 10px;
    padding: .3em 1em;
    background-color: #19B5FE;color: #FFF
}.post-tags a:hover{
border-radius: 10px;
    padding: .3em 1em;
    background-color: #1B1B1B;color: #FFF
}