D1704-WordPress子比主题美化教程：如何为头像添加迷人炫目的头像框

前言

有Bug的朋友们可以在评论区告诉我，我看了会笑的。修复Bug是无法实现的。如果你在这篇帖子中看不到图片，那是因为我的网站启用了防盗链功能。

截图预览

使用教程

1.将以下代码复制到主题配置->自定义代码：自定义CSS代码中

/*头像框*/
.txgj {
    top: 2px;
    transform: scale(1.7);
    width: 90px;
    position: absolute;
}

.top-user-info-box-name .txgj {
    left: -5px;
    transform: scale(1);
    top: 6px;
}

.post-meta-left .txgj {
    display: none;
}

.post-meta-left .avatar-parent .txgj {
    display: block;
    transform: scale(1.6);
    display: block;
    left: 0px !important;
}

.top-user-box-drop .avatar {
    border-radius: 50%;
}

.comment .gravatar img {
    border-radius: 50%;
}

/*用户中心头像圆形*/
.author-header .avatar-img {
    --this-size: 95px;
}

.author-header .avatar-img .avatar {
    border-radius: 50px;
    border: 4px solid var(--main-bg-color)
}

2.将头像框的图片素材下载并上传到个人网站，并记下网址。
3.复制以下代码到主题配置的自定义代码区域中的自定义JavaScript代码部分。

4.在上述代码中，将图片地址替换为你的头像框的地址。

头像框分享

下载链接