当前位置: 首页> 教育> 锐评 > 前端 CSS 经典:元素倒影

前端 CSS 经典:元素倒影

时间:2025/7/11 23:18:30来源:https://blog.csdn.net/weixin_64684095/article/details/139167550 浏览次数:2次

前言:好看的元素倒影,可以通过-webkit-box-reflect 实现。但有兼容问题,必须是 webkit 内核的浏览器,不然没效果。但是好看啊。

效果图:

 代码实现:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}img {margin: 200px;width: 200px;height: 200px;object-fit: cover;/* -webkit-box-reflect: 倒影方向 倒影间隔 蒙层*/-webkit-box-reflect: below 15px linear-gradient(transparent, transparent, #0005);}</style></head><body><img src="demo.jpg"/><script></script></body>
</html>

关键字:前端 CSS 经典:元素倒影

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: