1.css3阴影用到的知识点：阴影box-shadow和插入：after before
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box case-content"> <h1>卡片阴影效果</h1> </div> </body> </html>
CSS部分：
<style type="text/css"> .box { width: 70%; height: 200px; margin: 50px auto; background-color: #fff; } .box h1 { font-size: 20px; line-height: 200px; text-align: center; } .case-content { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; } .case-content:before ,.case-content:after{ z-index: -1; content: ""; background-color: #foo; position: absolute; top: 50%; bottom: 0; left: 10px; right: 10px; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); -o-box-shadow:0 0 20px rgba(0,0,0,0.8); border-radius: 100px/10px; }
备注：
1. css卡片阴影效果用到两个伪元素:after、before.
(1)、“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后；
(2)、伪元素如果没有设置“content”属性，伪元素是无用的；
浏览器支持:before 和 :after 伪元素栈，像这样：
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 几乎所有的移动浏览器。
- 唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。
2.inset用法:
(1)、inset是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.