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分配容器资源(Mac为docker和kubectl添加自动补全命令的方法)
- sql中的条件判断查询(SQL 多条件查询几种实现方法详细介绍)
- laravel零基础(基于laravel Request的所有方法详解)
- mysql语句详解(详解记录MySQL中lower_case_table_names的坑)
- 网页打开serviceunavailable(503 service unavailable错误解决方案讲解)
- python判断对象是否是某一类型(Python判断对象是否相等及eq函数的讲解)
- 什么是jsonp格式
- springcloud alibaba nacos linux配置的详细教程(springcloud alibaba nacos linux配置的详细教程)
- vsftpd详细配置(vsftpd匿名用户上传和下载的配置方法)
- 阿里云ECS实例中部署的Web网站运行速度慢的解决方法(阿里云ECS实例中部署的Web网站运行速度慢的解决方法)