CSS3를 사용하여 리플렉션을 구현하는 단계

일부 효과를 얻을 때 반사 요소를 사용할 것입니다. 이 기사에서는 CSS3를 사용하여 반사를 만드는 가장 완벽한 구현 단계를 설명합니다.

box-reflect: 없음 | 이 값은 주로 다음 값을 포함하는 box-reflect에 의해 생성된 반사의 방향을 나타냅니다. above: 생성된 반사가

object

(원본 이미지) 위에 있음을 나타냅니다.

below: 생성된 반사가 객체(원본 이미지) 위에 있음을 나타냅니다. )

left: 생성된 반사가 객체(원본 이미지)의 왼쪽에 있음을 나타냅니다.

right

: 생성된 반사는 객체(원본 이미지)의 오른쪽에 있습니다.

오프셋: 사용 생성된 반사와 객체(원본 이미지) 사이의 거리를 설정합니다. 값은 고정된 픽셀 값 또는 백분율 값일 수 있습니다. as:

생성된 반사와 원본 이미지 사이의 거리를 설정하려면 길이 값을 사용하세요. CSS의 길이 단위인 한 이 값에 음수 값을 사용할 수 있습니다.

백분율을 사용하여 설정하세요. 생성된 반사와 원본 이미지 사이의 거리, 이 값에 음수 값을 사용할 수도 있습니다.

mask-box-image: 사용 반사 마스크 효과를 설정하려면 배경

그림

또는 생성된 그라데이션

이 될 수 있습니다. 배경 이미지

.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3에서 변환 그라데이션 속성을 사용하는 방법

Css3에서 동적 스위치 효과를 구현하는 단계

CSS3 속성 선택기를 사용하여 역할을 대체하는 방법 JS

위 내용은 CSS3를 사용하여 리플렉션을 구현하는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!