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画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
AmazeUI中模态框的实现
Aug 19 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
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript 三种编解码方式
2010/02/01 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
英文商务邀请信
2014/01/22 职场文书
学子宴答谢词
2014/01/25 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书