效果图如下：

代码展示如下：

<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="; alt="" width="200px" >

属性说明：

filter: hue-rotate(angle)

给图像应用色相旋转。“angle”设定图像会被调整的色环角度值。值为0deg，则图像无变化。

若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

-webkit-box-reflect

是webkit内核浏览器的一个私有属性，用来对block(块级)元素或者行内块元素（img,input）制作一个镜像的效果

✨✨ above：指定倒影在对象的上边

✨✨below：指定倒影在对象的下边

✨✨ left：指定倒影在对象的左边

✨✨ right：指定倒影在对象的右边

✨✨ offset：倒影与对象之间的间隔，可以为负值。