1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>css3应用</title> 6 <link rel="stylesheet" href="style.css"/> 7 </head> 8 <body> 9 <div class="div1"></div> 10 </body> 11 </html>
1 div{ 2 width: 200px; 3 height: 200px; 4 background-color: yellow; 5 margin: 100px auto; 6 } 7 .div1{ 8 box-shadow: 0 0 0 6px red, 9 0 0 0 12px green, 10 0 0 0 18px blue; 11 } 12 /*当X,Y和 “模糊程度” 的值都为0是就可以实现边框效果，这时如果再添加几组数据而且分别改变投影的值的大小，就可以得到多边框效果*/
效果图可以考代码在自己浏览器看：
1 .div1{ 2 box-shadow: 0 0 0 6px red, 3 0 0 0 12px green, 4 0 0 0 18px blue, 5 inset 0 0 10px #000, 6 inset 0 0 60px blue, 7 inset 0 0 80px red; 8 }/*在刚刚的基础上加上内阴影，惊奇发现阴影颜色竟然发生混合，有很大的想象空间*/
css3投影偏移：
1 .div1{ 2 box-shadow: 0 0 0 6px red, 3 0 0 0 12px green, 4 0 0 0 18px blue, 5 inset 0 0 10px #000, 6 inset 0 0 60px blue, 7 inset 0 0 80px red, 8 236px 0 0 2px #709b1e;/*再多加一组阴影，并且让其在X方向上偏移*/ 9 }
综上，CSS3，可以实现以前在PS上面才能实现的效果。好牛逼的说。
原文：http://www.cnblogs.com/kenan9527/p/4531943.html