如何制作一个带倒影的图片效果_应用CSS box-reflect属性

box-reflect已废弃，仅旧版Safari支持且功能受限；推荐用clip-path+scaleY(-1)伪元素方案实现兼容性好、可控性强的倒影效果。

box-reflect 在现代浏览器中基本不可用——它从未被纳入 CSS 标准，仅作为 WebKit 早期实验性私有属性存在，Chrome 已于 v45+ 彻底移除，Firefox 和 Edge 从未支持。想实现倒影效果，得绕开它。

为什么 box-reflect 现在不能用

这个属性只在 Safari 旧版本（≤ iOS 7 / macOS 10.9）中可用，且行为不一致：不支持渐变遮罩、无法控制缩放或偏移、与 transform 或 filter 复合使用时经常失效。现在写 box-reflect: below; 几乎等于写注释。

用 clip-path + scaleY(-1) 模拟倒影（推荐）

这是目前最可控、兼容性好（Chrome 55+、Firefox 54+、Safari 15.4+）、能配合阴影/渐变的方案：

.reflected-img {  position: relative;  display: inline-block;}.reflected-img::after {  content: "";  position: absolute;  top: 100%;  left: 0;  width: 100%;  height: 80%; /* 倒影高度 */  background: inherit;  transform: scaleY(-1);  transform-origin: top;  clip-path: inset(0 0 20% 0); /* 遮掉底部20%，模拟淡出 */  opacity: 0.6;}

• background: inherit 确保倒影取原图样式，需确保父元素有 background-image 或 img 元素用 background-image: url(...) 设置
• 若原图是 <img> 标签，更稳妥的做法是用伪元素 + background-image 复制图层，避免 inherit 失效
• clip-path: inset() 比 mask-image 兼容性更好；如需柔和渐变消失，可改用 mask-image: linear-gradient(to bottom, black 60%, transparent 100%)（注意 Safari 需加 -webkit- 前缀）

用 SVG <feOffset> + <feGaussianBlur> 做高质量倒影

适合对视觉精度要求高、需要模糊+位移+透明度分层控制的场景（比如产品页 Banner）：

立即学习“前端免费学习笔记（深入）”；

<svg width="0" height="0">  <defs>    <filter id="reflection">      <feOffset dy="2" />      <feGaussianBlur stdDeviation="1" result="blur" />      <feComponentTransfer>        <feFuncA type="linear" slope="0.4" />      </feComponentTransfer>      <feMerge>        <feMergeNode in="blur" />        <feMergeNode in="SourceGraphic" />      </feMerge>    </filter>  </defs></svg>

然后在图片上应用：<img src="..." style="filter: url(#reflection);">

• 注意 <feOffset> 的 dy 控制倒影垂直距离，负值会向上偏移（慎用）
• feComponentTransfer 中的 slope 直接调节整体透明度，比 opacity 更精准（不影响边缘抗锯齿）
• 该 SVG 必须在页面内（不能外链），且需确保 ID 不冲突

真正麻烦的不是怎么画倒影，而是响应式下如何保持倒影比例随图片缩放同步变化——clip-path 用百分比值相对安全，但 SVG filter 的 stdDeviation 和 dy 是绝对像素，缩放时容易失真。这时候往往得配合 JS 监听 resize 动态重设 filter 参数，或者直接放弃 SVG 方案。