css倒影（-webkit-box-reflect）
webkit-box-reflect属性提供元素倒影：
三个参数：
- 参数1：方向：above（向上）below（向下）left（向左）right（向右）。
- 参数2：倒影与元素的间隔（px或者百分比）。
- 参数3：遮盖图片，语法跟background-image差不多。
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字倒影</title> <style> html, .textreflect { width: 600px; height: 300px; border-radius: 8px; margin: 100px auto; /* 倒影关键代码 */ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2))); } .textreflect img { width: 100%; height: 100%; } </style> </head> <body> <div class="textreflect"> <img src="./微信图片_20230813234848.png" alt=""> </div> </body> </html>
效果
