使用CSS实现照片边缘模糊+圆角效果教程Html

印迹发布于:2019-2-24 1663

在网页设计中经常会用到边缘模糊的照片,这类照片由于边缘演变渐变,在压缩时很容易出现边缘锯齿化的问题,因此不得不采用较高质量的图片,导致网页体积的增大。事实上,使用CSS3的新特性可以很容易实现各种图片边缘的模糊效果。

首先,需要在图片标签外部套一层DIV标签:

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

然后只需要为外层DIV添加一圈向内的边缘阴影,以模拟图片边缘模糊效果,CSS样式如下:

.cover {
    width: 180px;
    height: 180px;
    position: relative;
}
.cover:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0 0 50px 30px #ffffff inset;
}
img{
    width: 180px;
    height: 180px;
    display: block;
    margin-bottom: 20px;
}

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


图片圆角效果:图片圆角详细教程链接请点这里

img{ border-radius:5px; }


http://www.virplus.com/thread-138.htm
转载请注明:2019-2-24 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回