如何使用CSS3实现书页（书本）卷角效果_html/css_WEB-ITnose

来源：动视网责编：小采时间：2020-11-27 16:20:56

如何使用CSS3实现书页（书本）卷角效果_html/css_WEB-ITnose

如何使用CSS3实现书页（书本）卷角效果_html/css_WEB-ITnose:我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果，以使其更为逼真。所谓的卷角实际上可以用小角度倾斜的阴影效果来模拟。用CSS3的伪元素实现这个效果很容易。先给出一个实例，我们在WOW站

推荐度：

点击下载本文 文档为doc格式

导读如何使用CSS3实现书页（书本）卷角效果_html/css_WEB-ITnose:我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果，以使其更为逼真。所谓的卷角实际上可以用小角度倾斜的阴影效果来模拟。用CSS3的伪元素实现这个效果很容易。先给出一个实例，我们在WOW站

我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。

我们可以给书签添加卷角效果，以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。

用CSS3的伪元素实现这个效果很容易。

先给出一个实例，我们在WOW站点页面左边栏实现了如下的效果（红框内）：

我们再来看看具体实现。

首先创建一个div元素容纳文本信息（可以包含更多元素），class取名为“狗耳朵”也就是卷角的意思：

put your tips here

然后编写如下的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: "\f0eb"; 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下可以工作。

by iefreer