为图片添加内阴影效果的三种方法

您所在的位置：网站首页 › 怎么给图片添加阴影效果 › 为图片添加内阴影效果的三种方法

为图片添加内阴影效果的三种方法

2023-07-13 03:18| 来源: 网络整理| 查看: 265

一、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内阴影。

效果图：

现在对图片添加内阴影效果。

demo2：对img标签直接添加inset内阴影效果。

图片看不到任何效果：

（上图图片下面有一条线，是截图截取到，本不该有的）

demo3：

demo4：

demo5：

三种方法的代码整合在如下

DOCTYPE html> img父元素实现图片内阴影 .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; } 给div元素添加内阴影效果法一：通过设置一个div给它，然后对该父元素进行设置内阴影法二：在img父元素上应用:before伪元素来实现法三：利用jQuery方法来实现img内阴影原理：通过jQuery把img标签转换为div元素，把img元素转换成div的背景元素。,我们都知道在div元素使用内阴影是没有问题的。

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); }); }); });

上面三种方法，得到的效果图：

【本文地址】

为图片添加内阴影效果的三种方法

为图片添加内阴影效果的三种方法

今日新闻

推荐新闻