共計 2580 個字符，預計需要花費 7 分鐘才能閱讀完成。

知更鳥主題美化 CSS 代碼大全，讓你的知更鳥主題更加個性和美觀，下面橘子君整理了美化代碼僅供參考。

使用說明：

知更鳥主題不用修改任何文件，將以下 css 代碼添加到【主題選項】-【定制風格】-【自定義樣式】中即可，或者自行添加到主題 css 文件中。

1、頁腳彩色橫條美化代碼

/* 彩色滾動美化 */
#footer-widget-box {background: #555 url(https://www.zhixinask.com/wp-content/uploads/2021/01/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}

2、頂部導航漸變色美化代碼

#top-header {background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
    border-bottom: 1px solid #dedede;
}

3、面包屑導航樣式美化代碼

.breadcrumb{border-width:1px;
background-color:rgb(255, 255, 255);
margin-Bottom:5px;border-radius:2px;margin-top:5px;}

4、頂部菜單樣式代碼

.shen{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.wu{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}

5、文章底部分享點贊樣式代碼

.social-main a {color: #fff;}
.like a {
    background: #f40000;
    border: 1px solid #f40000;
}
.share-s a {
    background: #dd9933;
    border: 1px solid #dd9933;
}
.social-main i {color: #fff;}
.shang-p a {
    background: #7ab951;
    border: 1px solid #7ab951;
}
.social-main a:hover {
    color: #fff;
    background: #666;
}
.like a:hover, .share-s a:hover, .shang-p a:hover {border: 1px solid #666;}

6、文章列表閱讀全文樣式美化代碼

.entry-more a {opacity:0}
.post:hover .entry-more a {
    rightright:0;
    opacity:1;
}
.post {transition:all 0.3s ease 0s;}
.post:hover {transform:translateY(-3px);
    z-index:1;
    -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
}

7、鼠標懸停抖動美化代碼

img:hover {
-webkit-animation:shenwu 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes shenwu {
0% {-webkit-transform:scale(1)
}
10%, 20% {-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {-webkit-transform:scale(1) rotate(0)
}

8、全站隱藏頂部菜單美化代碼

#masthead {height：90px ;}
#header-top{
 {display: none;}
@media only screen and (max-width: 900px) {
#masthead {height: 40px;}
}

9、TAG 標簽樣式美化分兩步驟

1. 在 style.css 插入，或主題選項 - 定制風格 - 自定義樣式

/* 標簽美化 */
.tagcloud{padding:14px 0 14px 12px;}  
.tagcloud a{  
float:left;  
margin:3px;  
line-height:26px;  
text-align:center;  
border:1px solid #ddd;  
border-radius:2px;  
padding-top:0;  
padding-right:5px;  
padding-bottom:0;  
padding-left:5px;  
overflow:hidden;  
display:block;  
width:92px;  
height:28px;  
}  
.tagcloud a{color:#fff;}

2. 在 footer.php 插入

<script type="text/javascript">box_width = $("#cx_tag_cloud-5").width();  
len = $(".tagcloud a").length - 1;  
$(".tagcloud a").each(function(i) {var let = new Array('3366FF', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');  
    var random1 = Math.floor(Math.random() * 9) + 0;  
    var num = Math.floor(Math.random() * 6 + 9);  
    $(this).attr('style', 'background:#' + let[random1] + '');  
    if ($(this).next().length > 0) {last = $(this).next().position().left  
    }  
});</script>

要記得將 3D 標簽云前面的√去掉

如果你的站點使用的是知更鳥主題，上面的 CSS 美化代碼千萬別錯過。