一、中规中矩的效果

所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：

CSS3的box-shadow投影效果，相关代码如下：

代码如下:

-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2)-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2)box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2)

反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下：

代码如下:

.page:after { width: 180pxheight: 30pxcontent: " "margin-left: -90pxborder: 1px solid rgba(200, 200, 200, .8)background: rgba(254, 254, 254, .6)-moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1)-webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1)box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1)-moz-transform: rotate(-5deg)-webkit-transform: rotate(-5deg)-o-transform: rotate(-5deg)transform: rotate(-5deg)position: absoluteleft: 50%top: -15px}

老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。

二、外翻卷角纸张效果

纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且是曲线投影。

我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲度。

同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。

于是，在“中规中矩”纸张基础上，我们做点小手术，结果得到下面的效果：

您可以狠狠地点击这里：渐变卷边纸张效果demo

目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？

相关渐变CSS代码如下：

代码如下:

background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6)background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41))

在60%的位置有个颜色拐点。

关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下：

代码如下:

.page:before { -webkit-transform: skew(-15deg) rotate(-5deg)-moz-transform: skew(-15deg) rotate(-5deg)-o-transform: skew(-15deg) rotate(-5deg)transform: skew(-15deg) rotate(-5deg)left: 15px} .page:after { -webkit-transform: skew(15deg) rotate(5deg)-moz-transform: skew(15deg) rotate(5deg)-o-transform: skew(15deg) rotate(5deg)transform: skew(15deg) rotate(5deg)right: 15px} .page:before, .page:after { width: 90%height: 20%content: ' '-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3)-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3)box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3)position: absolutebottom: 22pxz-index: -1}

要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。

这里的曲线投影卷角效果支持Opera浏览器，如下截图：

三、带分隔线的卷纸纸张效果

上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的“曲线化”了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)：

这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。

这里分隔线实现的相关CSS如下：

代码如下:

background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px )background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) )background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px )-webkit-background-size: 100% 30px

而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码：

代码如下:

border-bottom-left-radius: 20px 500pxborder-bottom-right-radius: 500px 30pxborder-top-right-radius: 5px 100px

当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是”-”分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不啰嗦了。

还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。

四、最后点老生常谈

难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样：

虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了

#header 主体部分——空间头部的整个标题部分。

#header div.lc 主页左上角背景图片

#header div.rc 主页右上角背景图片

#header div.tit 空间名称，即主标题，名字大小颜色。

#header div.tit a.titlink 空间名称链接，未被点击。

#header div.tit a.titlink:visited空间名称链接，已被点击。

#header div.desc 空间简介，即副标题，位置大小颜色。

导航栏

#tabline 菜单下方的横线，即分隔符，用来与空间名称分开。

#tab 导航菜单栏主体——页面上方“主页博客|相册……”栏背景图片。

#tab a.on,#tab a.on:link,#tab a.on:visited 选中状态，即“导航栏链接”，大小颜色＋背景。

#tab span 导航栏项与项之间的分割符“|”

#tab a:link TAB“博客|相册……”栏链接颜色，未被点击。

#tab a:visited“博客|相册……”栏链接颜色，已被点击。

#tab2 (基本选项 | 模板设置 | 高级设置 | 访问统计) 这行的菜单主体属性

#tab2 span TAB选中状态

#tab2 a TAB未选中状态

#tab2 a:link

#tab2 a:visited

-------------------------------------------------------------------------------

内容区域

.stage 页面正文所有部分（导航栏以下）

其它区域（即访问量等信息）

#comm_info 主体部分——“其它”中“已有 人次访问本空间”颜色、位置

#comm_info div.line ——“已有 人次访问本空间”下面粉红色分割线相关设置

#comm_info a ——“其它”中“什么是RSS？”颜色

--------------------------------------------------------------------------------

页码区域

#page 主体 高度大小位置

#page span 当前页码（不可点击）

#page a.pc 上一页和下一页 未被点击

#page a.pc:visited 已被点击

#page a.pi 页码（可点击）

#page a.pi:visited

--------------------------------------------------------------------------------

个人档案区域

.mod ——模块标题，上下间距

.modhandle{cursor:move}

.modth 模块标题栏主体和正文之间的距离

.modhead 模块标题区的位置

.modopt 模块操作区（如写新文章），间距

.modtit 模块标题区（如文章列表、个人档案）大小颜色

.modtitlink 模块标题链接

.modact 操作文字链接，“修改个人资料”链接，——右上角“编辑”等链接的相关大小颜色设置。

.modbox 模块内容区主背景颜色等

a.modact:link：“修改个人资料”链接颜色

a.modactlink:visited

.modtl 模块左上角远郊边沿图片背景,第一列，空列

.modtc 模块中上的背景图片背景，第二、三列，个人档案、修改个人资料

.modtr 模块右上角背景图片背景，第四列，空列

.modbl 模块左下角背景图片背景，

.modbc 模块中下、最下端一条背景图片背景，

.modbr 模块右下角，背景图片背景，

--------------------------------------------------------------------------------

文章区域

#m_blog div.tit 文章标题

#m_blog div.tit a 文章标题链接，大小颜色，未被点击

#m_blog div.tit a:visited 文章标题大小颜色，已被点击

#m_blog div.date 文章发表日期，文字大小颜色

#m_blog div.cnt 文章内容大小颜色

#m_blog div.more “阅读全文>>”

#m_blog div.more a “阅读全文>>”的大小颜色，未被点击

#m_blog div.more a:visited “阅读全文>>”的大小颜色，已被点击

#m_blog div.opt 文章操作区（如“编辑”等的颜色大小）

#m_blog div.opt a 文章操作链接大小颜色

#m_blog div.opt a:visited “编辑 删除 评论(4) 浏览(21)”的大小颜色

#m_blog div.line 分隔条的相关设置

#m_blog div.none 无文章提示信息，隐形设置，不需要改变

--------------------------------------------------------------------------------

个人档案区域

#m_pro a 个人档案中“查看详细信息”的颜色，未被点击

#m_pro a:visited 个人档案中“查看详细信息”的颜色，已被点击

#m_pro div.image 个人档案中个人头像的显示位置，分为“中，左，右——center,left,right”

#m_pro div.act 操作区——个人介绍和头像的间距

#m_pro div.user 个人用户名的大小颜色

#m_pro div.desc 个人简介的大小颜色

#m_pro div.line 分界线

#m_pro td

--------------------------------------------------------------------------------

相册区域

#m_album div.image 相册中照片的显示位置，分为“中，左，右——center,left,right”

#m_album div.page

#m_album div.page a

#m_album div.page a:visited

--------------------------------------------------------------------------------

友情链接区域

#m_links div.item 子项——文章分类中各分类后面主题数及括号的大小颜色

#m_links div.item a 名称（链接）——文章分类中各分类的大小颜色，未被点击

#m_links div.item a:visited ——文章分类中各分类的大小颜色，已被点击

#m_links div.line 分界线 ——文章分类中各分类之间的分隔符的相关设置

--------------------------------------------------------------------------------

文章分类区域

#m_artclg div.item 子项——文章分类中各分类后面主题数及括号的大小颜色

#m_artclg div.item a 分类名称（链接）——文章分类中各分类的大小颜色，未被点击

#m_artclg div.item a:visited ——文章分类中各分类的大小颜色，已被点击

#m_artclg div.line 分界线——文章分类中各分类之间的分隔符的相关设置

--------------------------------------------------------------------------------

最新评论区域

#m_comment div.item 子项——最新评论中用户名的大小颜色，未被点击

#m_comment div.item a 最新评论中用户名的大小颜色，未被点击

#m_comment div.item a:visited 最新评论中用户名的大小颜色，已被点击

#m_comment div.item a.cnt 最新评论中评论文字的大小颜色，未被点击

#m_comment div.item a.cnt:visited 最新评论中评论文字的大小颜色，已被点击

#m_comment div.item a.cnt:hover 最新评论中评论文字当鼠标移上去时的颜色

#m_comment div.line 最新评论中各评论之间的分割线的相关设置

--------------------------------------------------------------------------------

下面的设置不是显示在主页上的

相册列表

#m_albumlist div.note

#m_albumlist div.desc 简介的设置

#m_albumlist div.none 无照片提示信息

#m_albumlist div.line 分界线

#m_albumlist div.tit 照片标题

#m_albumlist div.tit a 照片标题链接 ，未被点击

#m_albumlist div.tit a:visited 已被点击

#m_albumlist span.count 照片数量

#m_albumlist span.size 照片尺寸

#m_albumlist a.act 操作区链接（如编辑、删除）

#m_albumlist a.act:visited{color:#3399CC}

#m_albumlist a.page 页码链接，未被点击

#m_albumlist a.page:visited 已被点击

#m_albumlist td.image

--------------------------------------------------------------------------------

好友列表

#m_friend div.filter

#m_friend div.catalog

#m_friend div.user

#m_friend div.user a 好友名称（链接），未被点击

#m_friend div.user a:visited 已被点击

#m_friend div.line 分界线

--------------------------------------------------------------------------------

设置访问统计、模板设置

#m_setting a 链接{color:#3399CC}

#m_setting a:visited 颜色的设置，未被点击

#m_setting 主体颜色的设置，已被点击

#m_setting img.sel 模板预览图（选中状态）{border:4px solid #FFDB7B}

#m_setting img.unsel 模板预览图（未选中状态）

#m_setting span.tit 模板标题名称

#m_setting span.usr 作者名

#m_setting div.sel “当前模板”文字

#m_setting div.line 分界线

--------------------------------------------------------------------------------

系统公告

#m_sysinfo a 链接 颜色的设置，未被点击

#m_sysinfo a:visited 颜色的设置，已被点击

#m_sysinfo 主体 颜色大小

#m_sysinfo span.new 最新 颜色大小

#m_sysinfo span.date 发布时间颜色大小

--------------------------------------------------------------------------------

基本选项

#m_setbase 主体颜色大小

#m_setbase td 颜色大小

#m_setbase div.line 分界线

--------------------------------------------------------------------------------

网友评论

#in_comment 主体宽度

#in_comment div.tit 标题颜色大小等设置

#in_comment div.user 发表人名颜色大小等设置

#in_comment div.user a 发表人名（链接）未被点击的颜色大小

#in_comment div.user a:visited 已被点击的颜色大小

#in_comment div.user span.date 发表时间颜色大小

#in_comment div.desc 评论内容颜色大小

#in_comment div.line 分隔符的设置

#in_send div.tit 发表评论（标题）的设置

--------------------------------------------------------------------------------

文章存档

#m_filed div.item 主题的颜色大小设置

#m_filed div.item a 未被点击的颜色大小设置

#m_filed div.item a:visited 已被点击的的颜色大小设置

#m_filed div.line 分界线