SHUYE

“为next主题的主页文章添加阴影效果”

发表于 | 热度

From: http://jinfang.life/posts/90b55d7a/

next主题的主页文章列表颜色个人感觉有点单调，层次不够突出，一直想加个阴影效果，所以来改写一下前端样式，怕以后忘记，写文记之。

next主题的css好像是采用的less来组织编写的，所以打开chrome,定位以后发现是在编译后的main.css 的类.posts-expand .post来控制的。

解决方法

打开themes/next/source/css/_schemes/Mist/_posts-expanded.styl文件
找到类.posts-expand下面的.post

{ 
1
2
3
4
5
6
7
8
9
10
11
12
... 
.post { 
margin-top: 120px; 
} 
... 
}

修改成 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.posts-expand { 
... 
.post { 
margin-top: 60px; 
margin-bottom: 60px; 
padding: 25px; 
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); 
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); 
} 
... 
}
------ 本文结束 ------