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


Posted in HTML / CSS onAugust 08, 2018

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

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

<div class="img-edge-cover">  
  <img src="photo.png" alt="photo">
</div>

2. 为外层DIV添加一圈向内的 边缘阴影 ,也是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;
}

注意,直接为外层DIV添加边缘阴影是看不到效果的,因为阴影会被图片遮住,必须通过一个绝对定位的伪元素添加阴影。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
css3动画效果抖动解决方法
Sep 03 #HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
You might like
php 归并排序 数组交集
2011/05/10 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
小议Javascript中的this指针
2010/03/18 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python使用Matplotlib画饼图
2018/09/25 Python
python 图片去噪的方法示例
2019/07/09 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
python访问hdfs的操作
2020/06/06 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
实习护士自我鉴定
2013/10/13 职场文书
读书心得体会
2013/12/28 职场文书
民族团结先进个人材料
2014/02/05 职场文书
市场总经理岗位职责
2014/04/11 职场文书
中学生演讲稿
2014/04/26 职场文书
2014年中秋寄语
2014/08/11 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang