CSS翻頁分頁是網頁設計中常用的一種技術。它可以利用CSS設置頁面內容的分頁和翻頁效果，讓用戶在瀏覽網頁時有更好的閱讀體驗。現在就讓我們一起來學習如何使用CSS實現翻頁分頁效果。

首先，我們需要為頁面添加分頁符，這樣才能將頁面內容分成多頁。我們可以使用CSS的page-break-before屬性來設置分頁符的位置。該屬性可以設置分頁符出現在頁面的哪個位置，例如：

.page {
page-break-before: always;
}

這個例子會在.page元素之前添加分頁符，使得.page元素以及其后的內容出現在新的頁面中。

接下來，我們需要為頁面添加翻頁效果。同樣使用CSS的@page規則，可以設置size和margin屬性，以控制頁面的大小和邊距。同時使用orphans和widows屬性，可以控制頁面內容的流動，從而實現翻頁效果。例如：

@page {
size: A4 portrait;
margin: 2cm;
orphans: 3;
widows: 3;
}

這個例子將頁面設置為A4縱向大小，設置2cm的頁邊距，并且將orphans和widows屬性都設置為3。這樣在一頁中最多只有3行文字被截斷，從而使得頁面自然地出現翻頁效果。

最后，我們可以使用CSS的@media規則，以針對不同的設備類型和屏幕尺寸做出不同的頁面布局。例如，可以使用landscape關鍵字來設置橫向頁面布局：

@media print and (orientation: landscape) {
@page {
size: A4 landscape;
margin: 1cm;
orphans: 2;
widows: 2;
}
}

這個例子會在橫向打印模式下，將頁面設置為A4橫向大小，設置1cm的頁邊距，并且將orphans和widows屬性都設置為2。這樣在橫向頁面布局時也能夠實現優美的翻頁效果。

總結來說，使用CSS實現翻頁分頁效果，需要設置分頁符和頁面布局屬性，以控制頁面內容的流動和出現翻頁效果。同時可以通過@media規則，適配不同的設備類型和屏幕尺寸。希望這篇文章能夠幫助您更好地掌握CSS翻頁分頁技術。