CSS纸张阴影二三事

开篇废话

众所周知，我博客是模仿“纸”来进行设计的（真的众所周知吗？
纸的纹理使用的
zhongguose － 传统颜色
纸张纹理
包括字体，采用的方正聚珍仿宋
字体展示

方正聚珍仿宋是复刻民国丁善之、丁辅之兄弟所创制的聚珍仿宋的版本。源于宋元时期雕版印刷，横竖笔画粗细均匀，折笔处棱角分明，整体字形刚劲灵动

本人非常喜欢这个风格，尤其是放大后还有书写的真实痕迹
"永字八法"
以上目的都是为了营造一种单纯为阅读而设计的，但又不失细节的设计风格，
毕竟博客就是为了写文章的嘛。

今日想让博客的#board再像“纸”一点，想要模仿纸张略微弯曲的效果，因此求于网络。
（并非今日）

借鉴

于是发现了张鑫旭老师的文章
几种纯CSS(CSS3)下的纸张效果实现展示 « 张鑫旭-鑫空间-鑫生活

1
2
3
<body> 
	<div class="curve-paper"></div>
</body>
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
.curve-paper {
	width: 12em;
	height: 16em;
	position: relative;
	margin: 1em;
	display:inline-block;
	background-color: white;
	border: 1px solid #eee;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	}
.curve-paper::before {
	left: 1em;
	transform: skew(-18deg) rotate(-8deg);
}
.curve-paper::after {
	right: 1em;
	transform: skew(10deg, 7deg)
}
.curve-paper::before, .curve-paper::after {
	content: '';
	width: 70%;
	height: 50%;
	position: absolute;
	border: 1px solid black;
	bottom: .5em;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	z-index: -1;
}

实例
图片来源：CSS3 box-shadow（3D球，翘边纸）_3d阴影 css-CSDN博客

思路就是使用伪元素生成两个平行四边形，把他俩定位到底部，加上阴影，让四边形被盖住，阴影漏出来。

解决bug

bug其一：

在hexo博客中，使用z-index并不能让纸挡住菱形

原因在于

#board 设置了position: relative;且设置了z-index
我们观察发现，在文件main.css中，#board的z-index为3。

元素本体 #board 没有 z-index，不会创建新的 stacking context（堆叠上下文）
层叠上下文 - CSS：层叠样式表 | MDN
CSS 中只有以下情况会创建新的 stacking context：

  • position: relative|absolute|fixed + z-index 非 auto
  • opacity < 1
  • transform
  • filter
  • will-change
  • isolation: isolate
  • flex/inline-flex/grid 子元素 + z-index
    所以 .page 虽然有 position: relative，但没有 z-index，所以不会自己阻止子元素（伪元素）的 z-index 起作用。

简化理解：

  • .page 本体是“auto”，
  • .page::before 是 -1，
  • 所以 .page::before 会画在下面。
    一旦你给 .page 设置了 z-index，那伪元素的 z-index: -1 就会被锁死在 .page 的堆叠上下文内，只能在 .page 的“内部最底层”，但永远不能压过 .page 自身。

方法一：

因此我们需要

1
2
3
#board {  
  z-index: unset !important;
  }

不提倡，会破坏博客框架原有的层叠关系，导致某些bug的出现

方法二：

我们还可以利用3D

1
2
3
4
5
6
#board{
 transform-style: preserve-3d;
}
#board::before, #board::after {
	transform:... translateZ(-1px);
}

bug其二：

当纸张高度到达一定大小，就会导致两个菱形跑出来（不完全被纸张挡住）
如图所示，菱形跑出来了
如图
因此我们需要一个固定的高度，且高度不能过大，比如

1
2
3
4
5
6
#board::before, #board::after { /* before和after用来作纸张的两个角的阴影 */  
  content: '';  
  width: 80%;  
  height: 10px;  
  position: absolute;
}

因为设备宽度的不同，会导致两个平行四边形不能很好的「钉在」下方两个页脚处
并且我们需要适配多平台

1
2
3
4
@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px){}

自行调整left和right

展示

阴影效果

code
#前端 #CSS
CSS纸张阴影二三事
https://www.zheep.top/posts/731037148/
作者
西行寺岩羊
发布于
2025年5月21日
许可协议