CSS 리플렉션은 현재 Chrome 및 Safari 브라우저에서만 지원되며, -webkit- 접두사를 추가해야 합니다. 이번 글에서는 CSS 반사 box-reflect
-webkit-box-reflect
이니셜을 자세히 소개합니다. 값: 없음
적용 대상: 블록 수준 요소(인라인 블록 포함)
상속: 없음
값: 없음 <direction>
<offset>
? >?<mask-box-image>
(필수)는 상자 반사에 의해 생성된 반사 방향을 나타내며 주로 다음 값을 포함합니다. <direction>
above:表示生成的倒影在对象(原图)的上方; below:表示生成的倒影在对象(原图)的下方; left:表示生成的倒影在对象(原图)的左侧; right:表示生成的倒影在对象(原图)的右侧;
(선택 사항)는 생성된 반사 및 객체(원본 그림 사이의 간격), 해당 값은 고정된 픽셀 값 또는 백분율 값일 수 있습니다. <offset>
(선택 사항)는 반사의 마스크 효과를 설정하는 데 사용됩니다. 배경 이미지일 수도 있고, 그라데이션으로 생성된 배경 이미지일 수도 있습니다 <mask-box-image>