相关渐变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: absolute; bottom: 22px; z-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圆角，这里展示下示意的代码：
