关于

自定义CSS

自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS

首页文章版式阴影化

首页文章版式阴影化

.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

首页文章图片获取焦点放大

首页文章图片获取焦点放大

.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

标签云整齐排列

标签云整齐排列

QQ截图20200714165809.png

/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

文章内打赏图标跳动

文章内打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

手机适配中不显示热门及标签云

手机适配中不显示热门及标签云

将以下代码添加至后台-开发者设置-自定义CSS

/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

文章标题居中

文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

美化主页文章列表宽度

美化主页文章列表宽度

/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
    max-width: 90%;
}

粗体上色

粗体上色

/* 粗体上色 */
strong{
  color: rgb(255, 153, 0);
}

panel阴影

panel阴影

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

右侧栏气泡颜色加深

右侧栏气泡颜色加深

/* 右侧栏气泡颜色加深 */
div.post-tags>a,aside.asideBar .badge{background-color:#777}

时光机圆形头像

时光机圆形头像

/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

END
本文作者:
本文地址:https://muyu.mobi/21.html
文章标题:[持续更新]Handsome魔改记录
版权说明:若无注明,本文皆さくら荘丨樱花庄原创,转载请保留文章出处。
Last modification:November 22nd, 2020 at 10:45 am
If you think my article is useful to you, please feel free to appreciate