为图片添加内阴影效果的三种方法
一、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); }); }); });
上面三种方法，得到的效果图：
