background-size: cover
实现背景图平铺展开，各自显示各自区域的背景图
上面transition: all 0.4s ease-in-out
下面opacity: 0.7transform: scale(0.99)
实现动画效果过度，缩放
body{
background-image:url(d:/bg.gif)
background-repeat:no-repeat
background-attachment:fixed
}
如何只是设置不平铺，可能会让背景图片随着页面文字滚动，所以还是要对背景图片设置fixed固定。
<div class=‘demo’ style='width:100pxheight:50px”></div>.demo{
box-shadow: -2px 0 0 green, //左边阴影
0 -2px 0 blue, //顶部阴影
0 2px 0 red, //底部阴影
2px 0 0 yellow//右边阴影
}
具体想要哪边 自己拿主意把，。代码都在这里了。还有测试的时候 注释去掉。，CSS里面的注释不是这样的，直接复制会报错
IE8不支持CSS3
你还可以试试 楼下的那位 使用border-bottom实现；
或者 你用两个DIV做；
