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是從元素側邊進行投影,但是只渲染盒子內部的,丟棄外部的陰影而已.