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

最新推荐文章于 2024-05-20 15:17:08 发布

VIP文章 weixin_34088583

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量1.2k

点赞数

文章标签： javascript python 前端 ViewUI

一、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>

最低0.47元/天解锁文章

weixin_34088583

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
为图片添加内阴影效果的三种方法

一、box-shadaw是给对象实现图层阴影效果。1、参数。至多可以设置6个参数，可以使用一个或多个投影，如果使用多个投影时必须使用逗号","隔开。box-shadow: h-shadow v-shadow blur spread color inset;2、浏览器支持最新版的FF和Chrome浏览器无需加上前缀，但在Safari中还是需要的，在下面的测试代码中，为了兼容...
复制链接

扫一扫