使用CSS3制作倒影——box-reflect

效果图如下：

    <style>
        h1 {
            font-size: 50px;
            text-align: center;
            color:slateblue;
            filter: hue-rotate(240deg);
            -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));

        }
         img{
            filter: hue-rotate(120deg);
            -webkit-box-reflect: right 1px;
        }
    </style>

    <h1>你看到了什么</h1>
    <img src="https://img1.baidu.com/it/u=1964477391,3223175982&fm=26&fmt=auto" alt="" width="200px" >

属性说明：
filter: hue-rotate(angle)
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。
若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

-webkit-box-reflect
是webkit内核浏览器的一个私有属性，用来对block(块级)元素或者行内块元素（img,input）制作一个镜像的效果
✨✨ above：指定倒影在对象的上边
✨✨below：指定倒影在对象的下边
✨✨ left：指定倒影在对象的左边
✨✨ right：指定倒影在对象的右边
✨✨ offset：倒影与对象之间的间隔，可以为负值。