목차
box-reflect 예제 - 이미지 반사 box-reflect 정의 box-reflect 구문 box-reflect 예제 - 텍스트 반사 box-reflect 예제 - (반사방향/이격거리) 지정 box-reflect 예제 - (반사방향/이격거리/그라디언트) 지정
※ 비표준이라, 사용 비권장. 나중에 내용 변경될 수도 있음.
box-reflect 예제 - 이미지 반사
<style>
img {
-webkit-box-reflect: below;
}
</style>
<img src="https://i.imgur.com/PQNhCln.gif" width="50" height="50">
결과보기
box-reflect 정의
요소의 반사체 생성.
1.
반사체 생성 가능 위치: below / above / left / right
아직 비표준 속성이라서, -webkit- 접두어 항상 붙여야 함.
2.
기본값: none
상속여부: X
애니가능: X
CSS버전: CSS3
JS구문: object .style.webkitBoxReflect="below";
3.
Firefox 제외 한 주요 최신 브라우저 지원 .-webkit- 접두어 붙여야 함.
4. MDN box-reflect 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
box-reflect 구문
selector {box-reflect: none|below|above|left|right|position offset gradient |initial|inherit;}
[속성값]
none
반사체 생성 X (기본값)
below
아래쪽애 반사체 생성.
above
위쪽에 반사체 생성.
left
왼족에 반사체 생성.
right
오른쪽에 반사체 생성.
position offset
(반사위치/이격거리) 지정.
position 가능값: below, above, left, rightoffset 가능단위: px, pt, cm 등 다양한 거리단위 사용 가능.
position offset gradient
(반사위치/이격거리/그라디언트) 지정.
gradient 의미: transition 효과(= fading 효과 = 투명도) 설정.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
box-reflect 예제 - 텍스트 반사
<style>
h1 {
-webkit-box-reflect: below;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
box-reflect 예제 - (반사방향/이격거리) 지정
<style>
img {
-webkit-box-reflect: below 30px;
}
</style>
<img src="https://i.imgur.com/PQNhCln.gif" width="50" height="50">
결과보기
box-reflect 예제 - (반사방향/이격거리/그라디언트) 지정
<style>
img {
-webkit-box-reflect: below 30px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
<img src="https://i.imgur.com/PQNhCln.gif" width="50" height="50">
결과보기
