一、box-shadaw是給對象實現圖層陰影效果。
1、參數。
至多可以設置6個參數，可以使用一個或多個投影，如果使用多個投影時必須使用逗號","隔開。
box-shadow: h-shadow v-shadow blur spread color inset;
2、瀏覽器支持
最新版的FF和Chrome瀏覽器無需加上前綴，但在Safari中還是需要的，在下面的測試代碼中，為了兼容我會加上前綴。
二、為圖片添加內陰影的三種方法。
給一個div元素添加內陰影效果，不會存在任何問題。但是，如果在img標簽上直接應用box-shadow的inset是沒有
任何效果的。下面通過以下三種方法來實現對圖片添加inset內陰影效果。
（1）通過設置一個div給它，然后對該父元素進行設置內陰影
（2）在img父元素上應用:before偽元素來實現
（3）通過jQuery的方法，進行元素轉換
demo1：給div元素添加inset內陰影。
<!DOCTYPE html> <html> <head> <title>img父元素實現圖片內陰影</title> <style> .demo1{ width:300px; height:300px; box-shadow:0 0 30px blue inset; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } </style> </head> <body> <h3>給div元素添加內陰影效果</h3> <div class="demo1"></div> </body> </html>
效果圖：
現在對圖片添加內陰影效果。
demo2：對img標簽直接添加inset內陰影效果。
<!DOCTYPE html> <html> <head> <title>img父元素實現圖片內陰影</title> <style> .demo1{ width:300px; height:300px; box-shadow:0 0 30px blue inset; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } .demo2 img{ box-shadow:0 0 30px blue inset; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } </style> </head> <body> <h3>給div元素添加內陰影效果</h3> <div class="demo1"></div> <div class="demo2"> <img src="images/inset.jpg" alt="boxshow"/> </div> </body> </html>
圖片看不到任何效果：
（上圖圖片下面有一條線，是截圖截取到，本不該有的）
demo3：
demo4：
demo5：
三種方法的代碼整合在如下
<!DOCTYPE html> <html> <head> <title>img父元素實現圖片內陰影</title> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/jquery-img.js"></script> <style> .demo1{ width:300px; height:300px; box-shadow:0 0 30px blue inset; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } .demo2 img{ box-shadow:0 0 30px blue inset; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } .demo3{ -webkit-box-shadow:inset 0 0 30px blue; -moz-box-shadow:inset 0 0 30px blue; box-shadow:inset 0 0 30px blue; display:inline-block; } .demo3 img{ position:relative; z-index:-1; } .demo4{ position:relative; display:inline-block; *display:inline; } .demo4:before{ content:""; position:absolute; width:100%; height:100%; -webkit-box-shadow:0 0 30px blue inset; -moz-box-shadow:0 0 30px blue inset; -o-box-shadow:0 0 30px blue inset; } .demo5-img{ box-shadow: 0 0 30px red inset; -webkit-box-shadow: 0 0 30px red inset; -moz-box-shadow: 0 0 30px red inset; } </style> </head> <body> <h3>給div元素添加內陰影效果</h3> <div class="demo1"></div> <div class="demo2"> <img src="images/inset.jpg" alt="boxshow"/> </div> <h3>法一：通過設置一個div給它，然后對該父元素進行設置內陰影</h3> <div class="demo3"> <img src="images/inset.jpg" alt="boxshow"/> </div> <h3>法二：在img父元素上應用:before偽元素來實現</h3> <div class="demo4"> <img src="images/inset.jpg" alt="boxshow"/> </div> <h3>法三：利用jQuery方法來實現img內陰影</h3> <h5>原理：通過jQuery把img標簽轉換為div元素，把img元素轉換成div的背景元素。,我們都知道在div元素使用內陰影是沒有問題的。</h5> <img src="images/inset.jpg" alt="boxshow" class="demo5-img"/> </body> </html>
jQuery-img.js
$(document).ready(function(){ $('img.demo5-img').each(function(){ var $img = $(this); $img.load(function(){ var $div = $('<div/>'); $div.width($img.width()); $div.height($img.height()); $div.css('background-image','url('+$img.attr('src')+')'); var display = $img.css('display'); if(display === 'inline'){ $div.css('display','inline-block'); }else{ $div.css('display',display); } $div.attr('class',$img.attr('class')); $img.replaceWith($div); }); }); });
上面三種方法，得到的效果圖：
