如何用CSS实现翻书（Flipbook）的内外阴影效果？

要实现你示例中翻书的内外阴影效果，核心是通过CSS分层元素+阴影/渐变+3D变换模拟真实纸张的光影变化，下面是具体实现方案：

一、基础结构与静态外部阴影 #

先搭建书本的基础HTML结构，给书本容器添加外部阴影，模拟书本放置在平面上的立体感：

<div class="book">
  <div class="page page-1">页面1</div>
  <div class="page page-2 active">页面2</div>
</div>

对应的基础CSS：

.book {
  width: 300px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  /* 书本外部阴影：模拟桌面投影，右下方向阴影更重 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* 开启3D空间，让翻页效果更真实 */
  perspective: 1500px;
}

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
  backface-visibility: hidden;
}

二、翻页时的内部阴影实现 #

翻页时的内部阴影需要模拟两个核心部分：翻折边缘的渐变阴影和页面背面的内嵌阴影，通过伪元素结合CSS动画实现：

/* 翻页动画：从平面翻折到背面 */
.page.active {
  transform-origin: left center;
  animation: flip 1s forwards;
}

@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(-180deg); }
}

/* 用伪元素模拟翻折处的动态渐变阴影 */
.page.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(0,0,0,0.15) 0%, 
    rgba(0,0,0,0.08) 50%, 
    rgba(0,0,0,0) 100%);
  opacity: 0;
  animation: flipShadow 1s forwards;
  transform-origin: left center;
}

/* 阴影随翻页角度动态显示/隐藏 */
@keyframes flipShadow {
  0% { 
    opacity: 0;
    transform: rotateY(0);
  }
  50% { 
    opacity: 1;
    transform: rotateY(-90deg);
  }
  100% { 
    opacity: 0;
    transform: rotateY(-180deg);
  }
}

/* 模拟页面背面的内嵌阴影，增强纸张厚度感 */
.page.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.1);
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

三、细节优化 #

• 调整阴影的rgba参数，可以让光影更贴近你示例中的柔和效果；
• 如果需要更细腻的翻折阴影，可叠加多层渐变或多个伪元素；
• 若要实现交互翻页，可通过JavaScript控制翻页角度，实时调整阴影的透明度和位置，提升流畅度。

内容的提问来源于stack exchange，提问作者JB999