应用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个肯定精准定位的伪元素加上黑影。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。