Handsome 美化补充

由于在网上找到的 handsome 主题的首页文章圆角的 css 代码只选择了首页的大头图版式,小头图和图片版式均无圆角和鼠标停留上浮效果,在这里分享下我加了这两个版式之后的代码,将其粘贴到 handsome 主题开发者设置的自定义 css 中即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*首页文章列表悬停上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article), .panel-picture {
transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover, .panel-picture:hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/*首页文章版式圆角化*/
.panel{
border: none !important;
border-radius: 15px !important;
}

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

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

.border-radius-6 {
border-radius: 15px;
}