CSS3 이미지 투영

1098 단어 css3
box-reflect
none: 기본값으로 그림자 효과가 없음을 표시합니다.
: 이 값은box-reflect가 그림자를 생성하는 방향을 나타낸다. 주로 다음과 같은 몇 가지 값을 포함한다.
above: 생성된 그림자가 대상(원도)의 위쪽에 있음을 나타낸다.
below: 생성된 그림자가 대상(원도) 아래에 있음을 나타낸다.
left: 생성된 그림자가 대상(원도)의 왼쪽에 있음을 나타낸다.
right: 생성된 그림자가 대상(원도)의 오른쪽에 있음을 나타낸다.
: 그림자와 대상(원도) 사이의 간격을 설정합니다. 그 값은 고정된 픽셀 값일 수도 있고 백분율 값일 수도 있습니다. 예를 들어:
길이 값을 사용하여 생성된 그림자와 원도 사이의 간격을 설정합니다. CSS의 길이 단위라면 마이너스를 사용할 수 있습니다.
백분율을 사용하여 생성된 그림자와 원도 사이의 간격을 설정합니다. 이 값도 마이너스 값을 사용할 수 있습니다
: 그림자를 거꾸로 하는 커버 효과를 설정합니다. 배경 그림일 수도 있고 점차적으로 생성된 배경 그림일 수도 있습니다.
주의: 그림자에 공백을 제공합니다. 공백을 제공하지 않으면 아무런 효과도 없습니다!
이것은 부모 용기의margin이 거꾸로 비치는 방향에 대응하는 공간을 요구한다.

.box-reflect{
  margin: 210px auto;
  width: 200px;
}
.box-reflect img {
  -wekbit-box-reflect: above;
  box-reflect: above;
}

http://www.w3cplus.com/css3/css3-box-reflect.html

좋은 웹페이지 즐겨찾기