CSS 反射

WebKit 现在支持 CSS 中的反射。延续了使用可爱婴儿照片来让功能显得更令人印象深刻的趋势，让我再次介绍凯特。🙂

反射是原始对象的副本，具有其自己的特定变换和遮罩。box-reflect 属性可用于指定应为此副本使用的专用变换和遮罩。

-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction>可以是以下之一：上方, 下方, 左侧或右侧.
<offset>是一个长度或百分比，指定反射与原始边框边缘的距离（使用指定的方向）。它可以省略，在这种情况下默认为 0。
<mask-box-image>是一个可用于覆盖反射的 mask-box-image。如果省略，反射将没有遮罩。

当源改变时，反射会自动更新。如果您将鼠标悬停在链接上，您会看到悬停效果在反射中发生。如果您反射<video>元素，您将看到视频在反射中播放。

给一个元素添加反射会产生一个堆叠上下文（因此它与不透明度、遮罩和变换结合）。反射是非交互性的，因此从点击测试的角度来看，它就像不存在一样。反射不会对布局产生影响（除了作为容器溢出的一部分），并且在这方面可以被认为是类似于box-shadow的。

上面的示例使用了渐变遮罩。以下是示例代码：

<img src="bubbles.jpg" style="border:5px solid white;-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));">