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添加边缘阴影是看不到效果的,因为阴影会被图片遮住,必须通过一个绝对定位的伪元素添加阴影。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- mysql 安装阿里云(详解如何在阿里云服务器安装Mysql数据库)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- 多个图片拼接python实现(python实现两张图片的像素融合)
- laravel服务器设置(基于Laravel-admin 后台的自定义页面用法详解)
- hive入门零基础教程(手把手教你在腾讯云上搭建hive3.1.2的方法)
- dedecms怎么加页面(dedecms导航判断当前选中样式的方法)
- web压力测试工具app(十款Web服务器性能压力测试工具)
- ASP.NET私有构造函数作用
- django操作默认数据库(Django数据库类库MySQLdb使用详解)