css3图片反光效果 |blur css 白边

/* 实现图片反光效果的CSS代码 */
img {
position: relative;
}
img::before {
content: "";
position: absolute;
top: -50%;
left: 0;
width: 100%;
height: 50%;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
opacity: 0.9;
transform: scaleY(-1);
}

上述代码中，大家首先为图片设置了position: relative，这是为了让图片和其伪元素的定位基准线相同。接着，大家用::before伪元素为图片添加了一个反光层。该伪元素在正常情况下是透明的，是不可见的。

为了实现反光效果，大家为该层设置了background属性，其中包含一个渐变函数。该函数会创建一个从上到下的渐变，从而实现反光的效果。大家还使用了opacity属性来降低层的不透明度，使反光效果更加柔和。最后，大家使用transform: scaleY(-1)将反光层进行垂直翻转，从而实现真实的反光效果。

总之，CSS3图片反光效果是一个简单而实用的技术，在网页设计中有广泛的应用。通过创造性的使用CSS3属性和值，大家可以轻松地为网页中的图片增添更多的美感和层次感，提升用户的视觉体验。