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

内容简介：使用CSS3的新特性实现各种图片边缘的模糊效果。1. 在图片标签外部套一层DIV标签：2. 为外层DIV添加一圈向内的

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

.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;
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• 【从0到1学习边缘容器系列】之 边缘应用管理
• 【从0到1学习边缘容器系列-3】应用容灾之边缘自治
• 中国首个边缘计算平台开源，百度发布智能边缘开源平台 OpenEdge
• Microsoft 将 Azure IoT 扩展到边缘设备，边缘计算越来越重要
• 《边缘云计算技术与标准化白皮书》发布 边缘与云如何实现互补
• CES 2019 | 百度全球发布智能边缘计算产品 BIE 和智能边缘计算开源版本 OpenEdge

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。