好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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

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


先给出一个实例,我们在WOW站点页面左边栏实现了如下的效果(红框内):



我们再来看看具体实现。

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

put your tips here

查看更多关于如何使用CSS3实现书页(书本)卷角效果_html/css_WEB-ITnose的详细内容...

  阅读:31次