-webkit-box-reflect

이미지나 CSS에 -webkit-box-reflect를 적용하면 거울에 비치는 것 같은 효과를 만들 수 있다.
현재는 인터넷 익스플로러와 사파리에서는 작동하지 않고 webkit 엔진에서 작동.

-webkit-box-reflect : 반사 방향, 원본과 떨어져 있을 거리, 효과

• 반사 방향
  · above : 원본의 윗 방향으로 반사
  · below : 원본의 아래 방향으로 반사
  · left : 원본의 왼쪽 방향으로 반사
  · right : 원본의 오른쪽 방향으로 반사

• 원본과의 거리
  · px, pt, em …

• 효과
  · linear-gradient 가 제일 무난하다.

-webkit-box-reflect: below 0px linear-gradient(180deg, rgba(#fff, 0) 0%, rgba(#fff, 1), 100%)

참고할 링크

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
• https://css-tricks.com/state-css-reflections/#webkit-browsers-webkit-box-reflect