CSS3 box-reflect를 사용하여 반사 효과 만들기

호환성

CSS3의 속성이므로 당연히 호환성을 살펴봐야 합니다. http://caniuse.com/css-reflections/embed

다음 , 상자 반사 사용법을 이해해 볼까요?

구문은 다음과 같습니다.

  -webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
  box-reflect:none | <direction> <offset>? <mask-box-image>?</mask-box-image></offset></direction></mask-box-image></offset></direction>

속성 설명:

없음: 이 값 반사가 없음을 나타내는 기본값입니다.

방향: 반사가 생성되는 방향

위: 반사가 아래 객체 위에 있음을 지정합니다. 반사가 객체 아래에 있음을 지정합니다. 왼쪽: 반사가 객체 위에 있음을 지정합니다. 객체의 왼쪽 오른쪽: 반사가 객체의 오른쪽에 있음을 지정합니다.

오프셋: 이미지 사이의 거리 및 반사

길이: 길이 값을 사용하여 반사와 객체 사이의 거리를 정의합니다. 음수 값 백분율일 수 있음: 백분율을 사용하여 반사와 개체 사이의 간격을 정의합니다. 음수일 수 있음

mask-box-image: 반사의 마스크 효과를 설정하는 데 사용됨

값은 다음과 같을 수 있음:

없음 : 마스크 이미지 URL 없음: 절대 또는 상대 주소를 사용하여 마스크 이미지를 지정합니다. 선형 그라데이션: 선형 그라데이션을 사용하여 마스크 이미지를 만듭니다. Radial-gradient: 방사형(방사형) 그래디언트를 사용하여 마스크 이미지를 만듭니다. 반복-선형-그라디언트: 반복 선형 그라디언트를 사용하여 백마스크 이미지를 만듭니다. Repeating-Radial-Gradient: 반복 방사형(방사형) 그라데이션을 사용하여 마스크 이미지를 만듭니다.

종이로만 이야기하는 것만으로는 충분하지 않습니다. 사례를 통해 효과를 확인해야 합니다.

반사 방향

이 예에서는 세 개의 img를 만들었습니다.

<p>   
  <img  alt="CSS3 box-reflect를 사용하여 반사 효과 만들기" >   
</p>   
<p>   
  <img  alt="CSS3 box-reflect를 사용하여 반사 효과 만들기" >   
</p>   
<p>   
  <img  alt="CSS3 box-reflect를 사용하여 반사 효과 만들기" >   
</p>

css 다음과 같습니다.

.box1,.box2,.box3{   
  width:120px;   
  float:left;   
  margin-right:180px;   
}   
img{   
  width:100%;   
}   
.box1 img{   
  -webkit-box-reflect:right;   
  box-reflect:right;   
}   
.box2 img,.box3 img{   
  -webkit-box-reflect: above;   
  box-reflect:above;   
}   
.box3{   
  padding-top:200px;   
}

렌더링은 다음과 같습니다.

여기 상자 2와 상자 3에 질문이 있습니다. 모든 그림에는 상단에 투영을 생성하는 box-reflect:above가 있습니다. 왜 box2에서는 효과를 볼 수 없습니까? 그 이유는 box3에는 padding-top:200px을 설정했지만 box2에는 설정하지 않았기 때문입니다. 처음에는 생성된 반사를 표시할 공간이 없기 때문인 것으로 추정됩니다.

반사와 물체 사이의 거리

반사가 생성되는 방향을 이해한 후 두 번째 속성을 살펴보겠습니다. 예를 살펴보겠습니다.

여전히 세 장의 사진을 사용하지만 스타일을 변경합니다.

.box1 img{   
  -webkit-box-reflect:below 30px;   
  box-reflect:below 30px;   
}   
.box2 img{   
  -webkit-box-reflect:below -30px;   
  box-reflect:below -30px;   
}   
.box3 img{   
  -webkit-box-reflect:below 5%;   
  box-reflect:below 5%;   
}

렌더링은 다음과 같습니다.

다음으로 마지막 속성을 알아봅니다.

마스크 효과

(1) 그라데이션을 사용하여 반사에 마스크 효과 추가

  .box1 img{   
  -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
  box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
}

효과는 다음과 같습니다.

배경 이미지를 사용하여 반사에 마스크 효과를 추가합니다

먼저 5개의 PNG 이미지가 필요합니다. -뾰족한 별:

.box2 img{   
  -webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
  box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
}

효과는 다음과 같습니다.

CSS3 box-reflect 사용에 대한 자세한 내용은 반사 효과 생성과 관련된 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!