前言：好看的元素倒影，可以通过-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>
![[激光原理与应用-93]：激光焊接检测传感器中常用的聚焦镜、分色镜、分光镜、滤波镜](https://img-blog.csdnimg.cn/direct/62dac74fe30c4685a5596e5563e23a6e.png)
