html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果

某些时候你可能需要让图片四周带有边缘模糊效果，那么除了PS之外有没有简单的代码实现方法呢？今天我们就使用CSS3的新特性实现图片边缘的模糊效果，首先你需要在图片标签外部套一层DIV标签，其次再为外层DIV(基于伪元素)添加一圈向内的边缘阴影，也是css3的新属性 box-shadow ，这样就达到了模拟图片边缘模糊效果的目的。以下是实例代码：HTML>

CSS3实现图片照片边缘模糊效果-益吾库

.img-edge-cover {

width: 180px;

height: 180px;

position: relative;

}

.img-edge-cover:after {

position: absolute;

content: '';

width: 100%;

height: 100%;

bottom: 0;

left: 0;

box-shadow:0 0 50px 30px #fff inset;

}

.img-edge-cover img{

width: 180px;

height: 180px;

display: block;

margin-bottom: 20px;

}

需要注意的是，直接为图片所在外层DIV添加边缘阴影是看不到效果的，因为阴影会被图片遮住，所以这则实例是通过一个绝对定位的伪元素添加阴影。

html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果相关推荐

html图片边框模糊,CSS3边框图片-像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解边框些是些如例回能泉配幻 ...
背景图片html写法,CSS3背景图片background属性简写/连写
在开发中背景属性 background 还是很常用的, background 有很多属性,如: background-color 背景颜色 background-image 背景图像 backgrou ...
html实现图片在立体,css3实现图片立体化缩放
匿名用户 1级 2015-04-02 回答 #experiment{ width:900px; margin: 200px auto; -webkit-perspective: 800;/*距离浏览器 ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
html如何让图片边缘模糊化,如何淡化图片周围区域？照片四周虚化怎么弄|最好的照片处理软件...
十二月的第一天,今天早早醒来天气也是有种突然变冷的感觉,也许广东在为入冬做准备了呀!不管天气怎么变化,小编还是会准时给大家分享音视频图片编辑操作滴!那么本次就给大家分享一个图片处理操作,更多音视频图片 ...
Jquery和CSS3实现图片鱼眼显示效果
Jquery和CSS3实现图片鱼眼显示效果记得在Flex中实现鱼眼效果的图片展示功能非常容易,对于JS而言,则略显复杂.但如今jquery和CSS3的组合,使得这种功能变得异常容易.今天我们就学习如 ...
python将图片转动漫_如何把照片变成手绘动漫化？
看了各位答主的回答,大都是利用 ps 或者是相应的 app 来实现动漫效果的. 其中的原理大同小异,大家看我这篇文章就足够了! 1.普通照片和动漫图片的区别要想搞清楚怎么变成动漫化风格,首先就要明白 ...
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果

html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果相关推荐

最新文章

热门文章