yanxi

Handsome主题的一些小修改教程,转载 Rat's Blog
看到 Rat's Blog 对Handsome主题优化,个人感觉还蛮不错的。转载-->版权归 Rat's B...
扫描右侧二维码阅读全文
18
2018/05

Handsome主题的一些小修改教程,转载 Rat's Blog

看到 Rat's Blog 对Handsome主题优化,个人感觉还蛮不错的。转载-->版权归 Rat's Blog 所有。

方法

1、首页文章版式圆角化

本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

2、首页文章版式阴影化

本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。

#阴影颜色修改rgba后面的值
/*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);
}
Last modification:June 4th, 2018 at 03:25 pm
If you think my article is useful to you, please feel free to appreciate

Comment here is closed