我们来详细探讨如何使用 CSS3 的 box-reflect 属性来创建倒影效果。
重要提示：box-reflect 目前仅被 WebKit 内核的浏览器支持（如 Safari 和旧版的 Chrome/Edge）。现代标准推荐使用更通用的 mask-image 或 clip-path 结合 transform 来实现跨浏览器的倒影效果。但了解 box-reflect 仍然很有价值，尤其是在针对 Safari 的优化中。
CSS3 box-reflect 属性详解
box-reflect 属性用于为一个元素创建一个镜像倒影。
语法
Css深色版本box-reflect: <direction> <offset>? <mask-box-image>?;
<direction>(方向): 定义倒影相对于元素的位置。above: 倒影在元素上方。below: 倒影在元素下方（最常用）。left: 倒影在元素左侧。right: 倒影在元素右侧。<offset>(偏移量): 可选。定义倒影与原始元素之间的距离。可以是任何长度单位（px, em, % 等）。例如10px。<mask-box-image>(遮罩): 可选。这是一个image，用作创建倒影的遮罩。最常用的是linear-gradient()渐变，用来实现倒影从不透明到透明的渐隐效果，使其看起来更自然。
基本用法示例
1. 最简单的倒影（仅方向）
Css深色版本.simple-reflect { -webkit-box-reflect: below; /* 仅 WebKit 支持 */ /* 标准语法（目前未被广泛支持） */ /* box-reflect: below; */ }效果： 在元素正下方创建一个完整的、不透明的倒影，紧贴元素。
2. 带偏移的倒影
Css深色版本.offset-reflect { -webkit-box-reflect: below 10px; /* 倒影在下方，距离元素 10px */ }效果： 倒影与原始元素之间有 10px 的空白。
3. 带渐隐效果的倒影（最常用且最自然）
这是创建逼真倒影的关键。使用 linear-gradient 作为遮罩。
Css深色版本.natural-reflect { -webkit-box-reflect: below 5px linear-gradient(transparent, transparent 70%, rgba(0, 0, 0, 0.4)); /* 解释: - below: 倒影在下方 - 5px: 距离原始元素 5px - linear-gradient(transparent, transparent 70%, rgba(0, 0, 0, 0.4)): * 从顶部（倒影的顶部，靠近原始元素）开始是透明的 (transparent)。 * 保持透明直到 70% 的位置。 * 从 70% 开始，渐变到 rgba(0, 0, 0, 0.4)（半透明黑色）。 * 这个渐变作为遮罩，意味着倒影的顶部是透明的（看不到），中间大部分是透明的，底部是半透明的。 * 最终效果是倒影从上到下逐渐变淡消失，非常自然。 */ }更常见的渐隐写法（从不透明到透明）：
Css深色版本/* 这种写法更直观：倒影开始时是半透明的，然后快速变透明 */ .natural-reflect { -webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.4)); /* 注意：这里用白色遮罩是因为倒影本身是元素的镜像。遮罩的白色部分让倒影显示，透明部分让倒影隐藏。*/ /* 或者更简单地用透明到半透明黑色 */ -webkit-box-reflect: below 5px linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.3)); }完整示例代码
Html深色版本<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS3 box-reflect 倒影效果</title> <style> body { font-family: Arial, sans-serif; background: #f0f0f0; padding: 40px; } .container { display: flex; justify-content: space-around; align-items: flex-end; /* 让元素底部对齐，方便看倒影 */ gap: 40px; min-height: 300px; } .demo-box { width: 150px; height: 150px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: bold; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* 1. 简单倒影 */ .simple { -webkit-box-reflect: below; } /* 2. 带偏移的倒影 */ .offset { -webkit-box-reflect: below 15px; } /* 3. 带渐隐效果的自然倒影 */ .natural { -webkit-box-reflect: below 10px linear-gradient(transparent, transparent 70%, rgba(0, 0, 0, 0.3)); } /* 4. 左侧倒影 (较少用) */ .left { -webkit-box-reflect: left 10px linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.3)); } </style> </head> <body> <h1>CSS3 box-reflect 倒影效果演示</h1> <div> <div class="demo-box simple">简单倒影</div> <div class="demo-box offset">偏移倒影</div> <div class="demo-box natural">自然倒影</div> <div class="demo-box left">左侧倒影</div> </div> </body> </html>注意事项与替代方案
浏览器兼容性: 这是
box-reflect最大的问题。只在 WebKit 浏览器中有效。在 Firefox, Chrome (新版), Edge 中不工作。使用时务必检查目标用户群体。性能: 对于复杂或动态内容，生成倒影可能有性能开销。
现代替代方案 (推荐):
使用
::after伪元素 +transform: scaleY(-1)创建镜像。使用
mask-image: linear-gradient(...)或clip-path在伪元素上创建渐隐效果。这种方法兼容性更好，是当前实现倒影的标准做法。
Css深色版本/* 现代兼容性更好的倒影实现 */ .modern-reflect { position: relative; } .modern-reflect::after { content: ""; position: absolute; top: 100%; /* 紧贴元素下方 */ left: 0; width: 100%; height: 100%; background: inherit; /* 继承父元素背景 */ transform: scaleY(-1); /* 翻转创建镜像 */ opacity: 0.4; /* 整体透明度 */ margin-top: 5px; /* 偏移 */ /* 创建渐隐遮罩 */ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); }总结
box-reflect 是一个强大且简洁的 CSS 属性，能快速为元素添加倒影，尤其适合在 Safari 中使用。通过结合 linear-gradient 遮罩，可以轻松创建非常逼真的渐隐倒影效果。然而，由于其有限的浏览器支持，在生产环境中，更推荐使用 ::after 伪元素 + transform + mask-image 的组合方案来实现跨浏览器兼容的倒影效果。
扫一扫在手机打开
