1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 6 <title>CSS3属性：box-shadow测试</title> 7 <script type="text/javascript" src="js/jquery.min.js"></script> 8 <script type="text/javascript" src="js/jquery.boxshadow.js"></script> 9 <style type="text/css"> 10 .box-shadow-1{ 11 -webkit-box-shadow: 3px 3px 3px; 12 -moz-box-shadow: 3px 3px 3px; 13 box-shadow: 3px 3px 3px; 14 } 15 .box-shadow-2{ 16 -webkit-box-shadow:0 0 10px #0CC; 17 -moz-box-shadow:0 0 10px #0CC; 18 box-shadow:0 0 10px #0CC; 19 } 20 .box-shadow-3{ 21 -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5); 22 -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5); 23 box-shadow:0 0 10px rgba(0, 204, 204, .5); 24 } 25 .box-shadow-4{ 26 -webkit-box-shadow:0 0 10px 15px #0CC; 27 -moz-box-shadow:0 0 10px 15px #0CC; 28 box-shadow:0 0 10px 15px #0CC; 29 } 30 .box-shadow-5{ 31 -webkit-box-shadow:inset 0 0 10px #0CC; 32 -moz-box-shadow:inset 0 0 10px #0CC; 33 box-shadow:inset 0 0 10px #0CC; 34 } 35 .box-shadow-6{ 36 box-shadow:-10px 0 10px red, /*左边阴影*/ 37 10px 0 10px yellow, /*右边阴影*/ 38 0 -10px 10px blue, /*顶部阴影*/ 39 0 10px 10px green; /*底边阴影*/ 40 } 41 .box-shadow-7{ 42 box-shadow:0 0 10px 5px black, 43 0 0 10px 20px red; 44 } 45 .box-shadow-8{ 46 box-shadow:0 0 10px 20px red, 47 0 0 10px 5px black; 48 } 49 .box-shadow-9{ 50 box-shadow: 0 0 0 1px red; 51 } 52 53 54 55 .obj{ 56 width:100px; 57 height:100px; 58 margin:50px auto; 59 background:#eee; 60 } 61 .outer{ 62 width: 100px; 63 height: 100px; 64 border: 1px solid red; 65 } 66 .inner{ 67 width: 60px; 68 height: 60px; 69 background-color: red; 70 -webkit-box-shadow: 50px 50px blue; 71 -moz-box-shadow: 50px 50px blue; 72 box-shadow: 50px 50px blue; 73 } 74 </style> 75 </head> 76 77 <body> 78 <div class="obj box-shadow-1"></div> 79 <div class="outer"> 80 <div class="inner"></div> 81 </div> 82 <div class="obj box-shadow-2" ></div> 83 <div class="obj box-shadow-3" ></div> 84 <div class="obj box-shadow-4" ></div> 85 <div class="obj box-shadow-5" ></div> 86 <div class="obj box-shadow-6" ></div> 87 <div class="obj box-shadow-7" ></div> 88 <div class="obj box-shadow-8" ></div> 89 <div class="obj box-shadow-9" ></div> 90 <script type="text/javascript"> 91 $(document).ready(function(){ 92 if($.browser.msie) { 93 $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow 94 } 95 }); 96 </script> 97 98 </body> 99 </html>
http://blog.csdn.net/freshlover/article/details/7610269