CSS3对照片相片开展边沿模糊不清解决的完成

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

应用CSS3的新特点完成各种各样照片边沿的模糊不清实际效果。

1. 在照片标识外界套1层DIV标识:

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

2. 为外层DIV加上1圈向内的 边沿黑影 ,也是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加上边沿黑影是看不见实际效果的,由于黑影会被照片遮挡住,务必根据1个肯定精准定位的伪元素加上黑影。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:网页页面文本运用CSS的1些技能 返回下一篇:没有了