box-reflect 반사 효과

See the Pen box-reflect 반사 by nilgi (@nilgi) on CodePen.

 

-webkit-box-reflect: below; // 아래로 반사

-webkit-box-reflect: above; // 위로 반사

-webkit-box-reflect: left; // 왼쪽으로 반사

-webkit-box-relfect: right; //오른쪽으로 반사

 

-webkit-box-reflect: righy 30px; // 반사 사이에 공간 넣기

 

-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0) rgba(0,0,0,0.7)); // 그라디언트를 이용해 물에 비치는 효과 만들어 보기