css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)
类别:Web前端 浏览量:1777
时间:2022-03-29 18:27:05 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添加边缘阴影是看不到效果的,因为阴影会被图片遮住,必须通过一个绝对定位的伪元素添加阴影。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- docker容器重启配置没了(docker修改未启动容器的配置信息操作)
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- webpack打包后的代码(webpack几种手动实现HMR的方式)
- 云服务器是什么技术(云服务器有什么作用?云服务器成为趋势的理由)
- php异常和错误区别(PHP批斗大会之缺失的异常详解)
- laravel5.1获取数据(laravel5表单唯一验证的实例代码)
- 配置ftp服务器基本步骤(搭建FTP服务器的简单实例)
- dede常用变量(dede调用文章第一张图片非缩略图的实现方法)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- 阿里云ecs开放所有端口(阿里云ECS实例挂载PE盘使用chroot命令提示“I have no name”错误的解决方法)