如何使⽤CSS3实现书页（书本）卷⾓效果我们有时候想在页⾯显⽰⼀个公告或⽤户提⽰信息。⼀个常⽤设计是使⽤书签形状。
我们可以给书签添加卷⾓效果，以使其更为逼真。所谓的“卷⾓”实际上可以⽤⼩⾓度倾斜的阴影效果来模拟。
⽤CSS3的伪元素实现这个效果很容易。
先给出⼀个实例，我们在页⾯左边栏实现了如下的效果（红框内）：
我们再来看看具体实现。
⾸先创建⼀个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所遮挡，但是刚好使得其外围阴影部分露出底部。
基本上好了，还差最后⼀步，两边阴影的倾斜度在物理学上是对称的，所以我们还需要调整⼀下:after伪元素的倾斜⾓度（-3°调整为3°）。
这样:before对应于标签的左下边⾓，:after对应于标签的右下边⾓的卷曲阴影。
rotate属性本例在IE11/Chrome/FF/Edge下可以⼯作。
你还可以使⽤CSS3中的伪类:hover和transition属性，在本例基础上添加⿏标悬停效果，
也就是当⽤户悬停在书页上时，呈现卷⾓被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
具体可参考。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。