在網頁設計中，為了增強用戶體驗，我們經常需要加入一些特效，比如今天我要介紹的CSS書頁卷角效果。

首先，我們需要用HTML創建一個書頁元素，并用CSS設置其樣式，如下所示：

<div class="book">
<div class="inner">
<p>這里是書頁的內容</p>
</div>
</div>
.book {
width: 300px;
height: 400px;
border: 1px solid #ddd;
position: relative;
overflow: hidden;
}
.inner {
width: 100%;
height: 100%;
background-color: #f9f9f9;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}

接下來，我們用CSS生成卷角效果。首先，我們設置一個偽元素，將其定位在書頁的右下角，并旋轉45度：

.book::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #f9f9f9;
transform: rotate(45deg);
}

然后，在偽元素上添加一個box-shadow，讓其模擬出卷起來的效果：

.book::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #f9f9f9;
transform: rotate(45deg);
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}

最后，我們把偽元素的背景色設置成與書頁相同的顏色，就可以讓兩者融合在一起了：

.book::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #f9f9f9;
transform: rotate(45deg);
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
background-color: inherit;
}

現在，我們的CSS書頁卷角效果已經完成了。你也可以根據需要調整書頁和卷角的大小、顏色等屬性，讓它更符合你的設計需求。