{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 tianshiyiyi 的文章《为图片添加内阴影效果的三种方法》','https://www.xiaopingtou.net/article-61588.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
一、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.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);
});
});
});
上面三种方法，得到的效果图：
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.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);
});
});
});
上面三种方法，得到的效果图：