JS 的 cloneNode 方法可以将一个元素及其所有内容克隆到目标元素，我们可以借此制作兼容性较好的倒影效果。请看以下代码：

<style>
#mydiv {
	 width: 232px;
	 height: 172px;
}
#rbox {
	width: 200px;
	top: 100px;
	transform: translate(0,100px) scale(1, -1);
	-webkit-mask: linear-gradient(to bottom, transparent, red);
}
</style>

<div id="mydiv"><img alt="" src="https://638183.freep.cn/638183/t22/webp/bird5.gif" /></div>
<div id="rbox"></div>

这组代码，id="mydiv" 的元素带有一个 img 子元素，id="rbox" 的元素没有任何内容，二者的CSS设置里尺寸相同，#rbox 有额外的设置：Y轴倒转+透明度设置。然后我们通过如下 JS 代码将 mydiv 元素的内容完整复制到 rbox 元素中：

<script>

let node = document.getElementById('mydiv').cloneNode(true);
rbox.appendChild(node);

</script>

最终效果如下：

本例，我们仅通过设置目标元素的 opacity 就能模拟出倒影，也许不够逼真，但已经很不错了。其实我们还有其他手段，诸如 blur 滤镜、mask 遮罩等等，利用好它们，再辅以合适的场景，营造出更为逼真的倒影效果并不是什么难事。

前一篇: label 和 output标签
下一篇: 动态剪裁多叶草