css制作倒影
使用 -webkit-box-reflect 属性
通过 -webkit-box-reflect 属性可以快速为元素创建倒影效果。该属性支持设置倒影方向、距离和遮罩效果。
示例代码：
.reflect {
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}below表示倒影在元素下方，还可使用above、left、right。10px控制倒影与元素的间距。linear-gradient用于渐变遮罩，避免倒影生硬。
注意：该属性为 WebKit 私有属性，兼容性有限（Chrome、Safari 等）。
使用伪元素模拟倒影
通过 ::after 伪元素结合 transform 和 opacity 实现跨浏览器兼容的倒影：
.reflect {
position: relative;
}
.reflect::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: inherit;
transform: scaleY(-1);
opacity: 0.3;
filter: blur(2px);
}transform: scaleY(-1)垂直翻转元素。opacity和filter: blur()增强倒影的真实感。
SVG 滤镜实现动态倒影
通过 SVG 的 feGaussianBlur 和 feOffset 滤镜实现更复杂的倒影效果：
<svg>
<filter id="reflect">
<feGaussianBlur stdDeviation="2" />
<feOffset dy="10" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.3" />
</feComponentTransfer>
</filter>
</svg>CSS 中调用：
.reflect {
filter: url(#reflect);
}适用于需要动态控制倒影模糊或变形的场景。
结合 mask-image 优化边缘
通过 CSS mask-image 控制倒影的渐隐效果：
.reflect::after {
mask-image: linear-gradient(to bottom, transparent 10%, white 80%);
}与伪元素方案结合使用，可替代 -webkit-box-reflect 的渐变遮罩功能。
总结
- 优先使用
-webkit-box-reflect实现简单倒影（需兼容性考虑）。 - 伪元素方案兼容性最佳，适合大多数场景。
- SVG 滤镜适用于复杂效果，但需额外 HTML 结构。
