[css] CSS - box-reflect 속성 (비표준) - 요소의 반사체 생성 (= box-reflect속성 = 박스리플렉트속성)

1. box-reflect 예제 - 이미지 반사
2. box-reflect 정의
3. box-reflect 구문
4. box-reflect 예제 - 텍스트 반사
5. box-reflect 예제 - (반사방향/이격거리) 지정
6. 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, right
• offset 가능단위: 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">

 

결과보기