美文网首页
Wordpress标签美化,柒比贰7b2主题标签美化:美化颜色、

Wordpress标签美化,柒比贰7b2主题标签美化:美化颜色、

作者: 盾给网络 | 来源:发表于2019-11-19 14:46 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Wordpress标签美化,柒比贰7b2主题标签美化:美化颜色、

          本文链接:https://www.haomeiwen.com/subject/rqgwictx.html