CSS box-reflect 속성

정의와 사용법

box-reflect 속성은 요소의 반사 효과를 생성하는 데 사용됩니다.

box-reflect 속성 값은 다음과 같을 수 있습니다:

  • below(아래)
  • above(위)
  • left(왼쪽)
  • right(오른쪽)

주의:box-reflect 속성은 표준 속성이 아닌 것입니다. 사용해야 합니다 -webkit- 접두사.

예시

예제 1

이미지 아래에 반사 효과를 추가합니다:

img {
  -webkit-box-reflect: below;
}

개인적으로 시도해 보세요

예제 2

box-reflect 속성은 어떤 보이는 HTML 요소에도 적용할 수 있습니다. 다음 예제에서는 <p> 태그 아래에 반사 효과를 생성합니다:

p {
  -webkit-box-reflect: below;
}

개인적으로 시도해 보세요

예제 3

box-reflect 속성은 두 값 문법을 사용할 수 있습니다. 다음 예제에서는 이미지 아래에 반사 효과를 생성하고, 70px의 거리를 설정합니다:

img {
  -webkit-box-reflect: below 70px;
}

개인적으로 시도해 보세요

예제 4

box-reflect 속성은 세 값 문법을 사용할 수 있습니다. 다음 예제에서는 이미지 아래에 반사 효과를 생성하고, 10px의 거리를 설정하고, 점진적으로 흐림을 설정합니다:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

개인적으로 시도해 보세요

CSS 문법

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

속성 값

값 설명
none 기본 값. 반사 효과를 표시하지 않습니다.
below 요소의 아래쪽에 반사 효과를 생성합니다.
above 요소의 위쪽에 반사 효과를 생성합니다.
left 요소의 왼쪽에 반사 효과를 생성합니다.
right 요소의 오른쪽에 반사 효과를 생성합니다.
position offset

두 값 문법:

  • position 반사의 위치(below, above, left 또는 right)를 설정합니다.
  • offset 반사의 거리를 설정합니다. 거리는 px, pt, cm 등의 단위를 사용할 수 있습니다. 기본 값은 0입니다.
position offset gradient

세 값 문법:

  • position 반사의 위치(below, above, left 또는 right)를 설정합니다.
  • offset 반사의 거리를 설정합니다. 거리는 px, pt, cm 등의 단위를 사용할 수 있습니다. 기본 값은 0입니다.
  • gradient 반사의 전이 효과를 설정합니다. 예를 들어, 흐림 효과를 설정할 수 있습니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기술 세부 사항

기본 값: none
상속성: 아니요
애니메이션 제작: 지원하지 않음. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.webkitBoxReflect="below"

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 최초의 브라우저 버전을 나타냅니다.

-webkit- 프리كس가 앞에 붙은 숫자는 이 프리كس를 최초로 지원한 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
4.0 -webkit- 79.0 -webkit- 지원하지 않음 4.0 -webkit- 15.0 -webkit-