前言：好看的元素倒影，可以通过-webkit-box-reflect 实现。但有兼容问题，必须是 webkit 内核的浏览器，不然没效果。但是好看啊。
效果图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="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>
![[保姆式教程]使用目标检测模型YOLO V8 OBB进行旋转目标的检测：训练自己的数据集（基于卫星和无人机的农业大棚数据集）](https://img-blog.csdnimg.cn/direct/b9385249ce824607add87c9fd3c0ce86.png)
