IT工程師數位筆記本

box-reflect一共有以下幾個屬性：

above：
指定倒影在對象的上邊

below：
指定倒影在對象的下邊

left：
指定倒影在對象的左邊

right：
指定倒影在對象的右邊

offset：倒影與對象之間的間隔，可以為負值。

另外還可以使用漸變以及圖片。

above

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:above;
}

below

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:below;
}

left

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:left;
}

right

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right;
}

offset偏移量

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right 10px;
}

利用offset我們就可以給圖片創建一個副本。

利用漸變制作圖片倒影

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

注意：如果同時指定方向以及漸變必須把偏移量也加上就算是0px也得寫，不然不生效。

制作文字倒影

<style>
    h1{
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
    }
</style>
<h1>這是一段文字</h1>

話說本想結合裁剪制作一些東西，結果發現倒影被裁剪了。

<style>
    img{
        width:50px;
        height:50px;
        margin:100px;
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
        -webkit-clip-path:polygon(0px 100%,50% 0px,100% 100%,0px 100%);
    }
</style>

倒也不是說倒影沒了，只是被裁剪了，有些圖形還是會在的，結果發現真是意想不到啊。

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-clip-path:polygon(0px 200%,50% 0px,100% 200%,0px 200%);
    -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

看來結合裁剪也是一種學問啊。