您的位置:首页 > Web前端 > > 正文

css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)

更多 时间:2022-03-29 18:27:05 类别:Web前端 浏览量:1777

css 图片边缘虚化

CSS3对图片照片进行边缘模糊处理的实现

使用CSS3的新特性实现各种图片边缘的模糊效果。

1. 在图片标签外部套一层li标签:

  • <li class="img-edge-cover">  
      <img src="photo.png" alt="photo">
    </li>
    
  • 2. 为外层li添加一圈向内的 边缘阴影 ,也是css3的新特征 box-shadow ,以模拟图片边缘模糊效果,CSS样式如下:

  • .img-edge-cover {
        width: 180px;
        height: 180px;
        position: relative;
    }
    .img-edge-cover:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow:0 0 50px 30px #ffffff inset;
    }
    .img-edge-cover img{
        width: 180px;
        height: 180px;
        display: block;
        margin-bottom: 20px;
    }
    
    
  • 注意,直接为外层li添加边缘阴影是看不到效果的,因为阴影会被图片遮住,必须通过一个绝对定位的伪元素添加阴影。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。