利用渐变实现书本的效果

标签：中间   white   分享   设置   image   写法   bsp   die   hit   

如上图中间的那部分有点类似阴影的效果是用css3中的渐变（Gradients）来实现的

结构:

　　左边一个div，右边一个div。

样式:

　　左边一个背景为白色。

　　右边的div设置渐变属性:     background:-webkit-linear-gradient(left,#dddddd,white);/*Safari    5.1 - 6.0*/

　　　　　　　　　　　　　　  background:-o-linear-gradient(right,#dddddd,white);/*Opera 11.1 - 12.0*/

 　　　　　　　　　　　　　　 background:-moz-linear-gradient(right,#dddddd,white);/*Firefox 3.6 - 15*/

　　　　　　　　　　　　　　  background:linear-gradient(to right,#dddddd,white);/*标准的写法（必须放在最后）*/

说明：linear-gradient是线性渐变。最后一个background中的to right 指的是从左边到右边由#dddddd变成white

注意：IE9及其更低的版本不支持渐变。

利用渐变实现书本的效果

标签：中间   white   分享   设置   image   写法   bsp   die   hit   

原文地址：http://www.cnblogs.com/zjjDaily/p/6038678.html