怎樣使用CSS3實現書頁（書本）卷角效果

標籤：ATX   rcc   pap   w3g   kde   gid   ict   cuc   center   

我們有時候想在頁面顯示一個公告或使用者提示資訊。

一個經常使用設計是使用書籤形狀。

我們能夠給書籤加入卷角效果。以使其更為逼真。所謂的“卷角”實際上能夠用小角度傾斜的陰影製作效果來類比。

用CSS3的虛擬元素實現這個效果非常easy。

先給出一個執行個體。我們在WOW網站頁面左側邊欄實現了例如以下的效果（紅框內）：

我們再來看看詳細實現。

首先建立一個div元素容納文本資訊（能夠包括很多其它元素），class取名為“狗耳朵”也就是卷角的意思：

<div class="dog-eared-tip">put your tips here</div>

然後編寫例如以下的CSS代碼：

.dog-eared-tip{    padding: 7.5px 5px 7.5px 20px;    background: #DEAA2F;    font-size: 13px;    position: absolute;    text-align: center;    width: 100%;    color: black;}.dog-eared_tip:before, .work_tip:after {    content: "";    position: absolute;    z-index: -2;    -moz-transform: rotate(-3deg);    -webkit-transform: rotate(-3deg);    -o-transform: rotate(-3deg);    -ms-transform: rotate(-3deg);    transform: rotate(-3deg);    bottom: 15px;    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);    height: 50%;    left: 10px;    max-height: 100px;    max-width: 300px;    width: 50%;}.dog-eared_tip:after {    -moz-transform: rotate(3deg);    -webkit-transform: rotate(3deg);    -o-transform: rotate(3deg);    -ms-transform: rotate(3deg);        transform: rotate(3deg);    left: auto;    right: 10px;}

上面的代碼首先設定了div的經常使用樣式如底色、字型、置中、邊距等。

然後為該div的:before和:after虛擬元素設定框陰影（box-shadow）和小角度旋轉（rotate方法），

並把before和after的位置放在div的底部，而且z序列為負數。這種實際效果就是虛擬元素本身被div所遮擋。可是剛好使得其外圍陰影部分露出底部。

注意，這裡請記得不要給div設定overflow不可見的樣式。否則陰影不可見。

基本上好了，還差最後一步，兩邊陰影的傾斜度在物理學上是對稱的，所以我們還須要調整一下:after虛擬元素的傾斜角度（-3°調整為3°）。

這樣:before相應於標籤的左下邊角。:after相應於標籤的右下邊角的捲曲陰影。

本例在IE11/Chrome/FF/Edge下能夠工作。

你還能夠使用CSS3中的偽類:hover和transition屬性。在本例基礎上加入滑鼠移至上方效果，

也就是當使用者懸停在書頁上時。呈現卷角被緩緩撫平的效果，我們把這個稱之為“會呼吸的紙”。

詳細可參考WOW首頁的實現。

by iefreer

怎樣使用CSS3實現書頁（書本）卷角效果