纯HTML/CSS翻页电子书效果优化及问题修复求助

以下是针对你遇到的四个问题的具体解决方法，附带修复后的完整代码：

问题1：翻页后顶部边框消失 #

• 原因：.front类仅设置了左侧虚线边框，未定义顶部边框；部分内联样式的border语法错误（缺少solid关键字）导致边框不生效。
• 修复：
  1. 给.front和.back统一添加顶部边框样式；
  2. 修正所有内联样式中的border写法，补充solid关键字。

问题2：Chrome中back-btn改为left:13px后失效 #

• 原因：按钮被页面其他元素遮挡，点击区域无法触发事件。
• 修复：给.back-btn添加z-index:100，确保按钮处于最上层，不被遮挡。

问题3：整页点击翻页未实现 #

• 修复：将每个页面的.flip容器直接设置为对应checkbox的label，让整个页面区域成为可点击的翻页触发区，同时保留原按钮作为辅助操作入口。

问题4：Firefox中Lorem ipsum7/8页面返回按钮跳转异常 #

• 原因：页面翻转后的z-index层级逻辑在Firefox中渲染异常，导致页面切换混乱；最后一页的尺寸偏移也影响了布局。
• 修复：
  1. 调整checkbox选中后的z-index规则，确保每个页面翻转后层级正确对应；
  2. 修正最后一页的内联样式尺寸，统一为400x550px，避免布局偏移。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
cursor: pointer;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid #f0f0f0;
border-left-style: dashed;
border-top-style: solid;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
border-top: 1px solid #f0f0f0;
box-sizing: border-box;
padding: 0 13px;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
z-index: 100;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
left: 13px;
cursor: pointer;
color: #000;
z-index: 100;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c1:checked ~ .flip-book #p2 {
z-index: 5;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c2:checked ~ .flip-book #p3 {
z-index: 4;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c3:checked ~ .flip-book #p4 {
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c4:checked ~ .flip-book #p5 {
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}
</style>
</head>
<body>

<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div id="cover"></div>
<div class="flip-book">

<!-- Page 1 -->
<label for="c1" class="flip" id="p1">
<div class="back" style="border: 5px solid darkblue; border-top-style: solid;border-left-style: solid;border-bottom-style: solid;">
<h2>Lorem ipsum 1</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px; background:darkblue; color:white; border: 5px solid darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</label>

<!-- Page 2 -->
<label for="c2" class="flip" id="p2">
<div class="back">
<h2>Lorem ipsum 3</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="back-btn" for="c2">Back</label>
</div>
<div class="front">
<h2>Lorem ipsum 2</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="next-btn" for="c2">Next</label>
</div>
</label>

<!-- Page 3 -->
<label for="c3" class="flip" id="p3">
<div class="back">
<h2>Lorem ipsum 5</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="back-btn" for="c3">Back</label>
</div>
<div class="front">
<h2>Lorem ipsum 4</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="next-btn" for="c3">Next</label>
</div>
</label>

<!-- Page 4 -->
<label for="c4" class="flip" id="p4">
<div class="back">
<h2>Lorem ipsum 7</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="back-btn" for="c4">Back</label>
</div>
<div class="front">
<h2>Lorem ipsum 6</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="next-btn" for="c4">Next</label>
</div>
</label>

<!-- Page 5 -->
<label for="c5" class="flip" id="p5">
<div class="back" style="color:white; background:darkblue; border: 5px solid darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
End of the book
<label class="back-btn" for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px; border: 5px solid darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
<h2>Lorem ipsum 8</h2><br>
Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>
sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>
magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>
et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>
takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>
sit amet<br>
<label class="next-btn" for="c5">Next</label>
</div>
</label>

</div>
</div>
</body>
</html>

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