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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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/09/06 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
javascript arguments使用示例
2014/12/16 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python如何获取服务器硬件信息
2017/05/11 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python 变量类型详解
2018/10/10 Python
Django框架 信号调度原理解析
2019/09/04 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python colormap库的安装和使用详情
2020/10/06 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
新闻专业个人求职信
2013/12/19 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
网管求职信
2014/03/03 职场文书
陕西导游词
2015/02/04 职场文书