[html] view plain copy
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码：
[css] view plain copy
.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属性，在本例基础上添加鼠标悬停效果，
也就是当用户悬停在书页上时，呈现卷角被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
书籍资源的话，有以下：《pro HTML5 programming》（人邮出版社，《HTML5高级程序设计》）
这本书的主要价值是讲到了其他HTML5资源少讲到的一些如Geolocation、Web Socket、Workers和跨文档消息通信，如果你的网站需要用到以上的这些技术，那这本书应该适合你。翻译不错。
这本书的缺点是实用性差，太前瞻，像Web Worker这种功能，目前所有阅览器没法支持，只能模拟。
《HTML5 up and running》（电子工业出版社，《HTML5揭秘》）
《HTML5 up and running》其实也就是开源图书《dive into HTML5》
这本书（英文版）只是略读过其中两章，丰富的配图加上一些有趣的相关插叙，读起来很轻松。
主要内容覆盖了大部分现阶段能用的HTML5功能。
-
《HTML5 and CSS3》（The Pragmatic Bookshelf，这本好书似乎还没有出版社在翻译，可惜）
这本书不但介绍了HTML5，还介绍了CSS3，另外还提供详细的fall back tips，讲解如何让旧阅览器使用HTML5的新功能，是推荐的三本书中实用性最好的。
这也是我翻得最多的一本书。
-
总结一下，如果你在构造像是聊天室、LBS这类网站功能性需求很强的网站，那《pro HTML5 programming》适合你。
如果你的网站比较简单，而且你只是想做像是“将网站内的 < div = "header" > 改成 < header > ”、“把input里的输入提示从java script改成原生HTML5提示”这类小改进，那《HTML5 up and running》和《HTML5 and CSS3》都可以。
如果你是HTML5或者CSS3新手，或者你的网站对向后兼容性要求很高，那推荐《HTML5 and CSS3》。
