图片-谷酷资源网

WordPress子比主题zibll美化实现拟态效果CSS

WordPress主题子比zibll美化实现拟态效果CSS

CSS代码

.posts-item:not(.card) ,.author-header .avatar-img ,.full-widget-sm ,.header .sub-menu ,.modal-content ,.form-control ,.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow ,.article ,.dropdown-menu ,.btn-score ,.float-right.round .float-btn ,.forum-posts.alone ,.zib-widget ,.posts-mini-lists ,.posts-item.card.style3 {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}

如果觉得拟态程度不够,那么你可以使用下面这个css

.posts-item:not(.card) ,.author-header .avatar-img ,.full-widget-sm ,.header .sub-menu ,.modal-content ,.form-control ,.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow ,.article ,.dropdown-menu ,.btn-score ,.float-right.round .float-btn ,.forum-posts.alone ,.zib-widget ,.posts-mini-lists ,.posts-item.card.style3 {
    background-color: #ebecf0;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    border-radius: 30px;
    transition: all .2s;
    -webkit-transition: all .2s;
}

第一个是奈斯主题的配色方案,第二个是小枫拟态4.0个人主页的配色方案

温馨提示:本文最后更新于2024-08-13 09:53:02已超过158天没有更新,某些文章具有时效性,若有错误或已失效,请在下方留言或联系官方客服
© 版权声明
ZUITX.COM
喜欢就支持一下吧
点赞15赞赏 分享打赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!(必须包含中文)
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容