CSS3에서 글꼴 반사를 구현하는 방법-CSS 튜토리얼-php.cn

CSS3에서 글꼴 반사를 구현하는 방법

藏色散人

풀어 주다： 2020-12-17 16:35:15

원래의

4003명이 탐색했습니다.

css3에서 글꼴 반사를 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 텍스트 부분을 정의한 다음 지정된 텍스트에 "box-reflect" 속성을 추가하여 글꼴 반사를 구현합니다.

CSS3에서 글꼴 반사를 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

css3 글꼴 반사를 달성하기

CSS에서 box-reflect 속성은 주로 글꼴 반사 효과를 얻기 위해 사용됩니다.

box-reflect 속성은 주로 객체 반사를 설정하거나 검색하는 데 사용됩니다.

box-reflect 구문

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

로그인 후 복사

이 속성은 W3C 표준 속성이 아니므로 사용 시 브라우저의 private 속성을 추가해야 하며, 브라우저의 호환성에 따라 사용 시 -webkit 접두사를 추가해야 합니다. box-reflect :

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

로그인 후 복사

이 속성은 Firefox에서 지원되지 않습니다. Firefox에서는 -moz-element()를 사용하여

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html,body{ margin:50px 0; } .reflect{ width:950px; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 100px/1.231 georgia,sans-serif; text-transform:uppercase; } </style> </head> <body> <div>你看到倒影了么？</div> </body> </html>

로그인 후 복사

1을 시뮬레이션할 수 있습니다. 방향은 방향을 정의하며 값에는 위, 아래, 왼쪽이 포함됩니다. , 그리고 맞아요.

위: 반사가 물체 위에 있도록 지정

아래: 반사가 물체 아래에 있도록 지정

왼쪽: 반사가 물체의 왼쪽에 있도록 지정

오른쪽: 반사가 켜짐 지정 개체의 오른쪽

2. 오프셋은 반사 오프셋 거리를 정의하며, 이는 숫자 값 또는 백분율일 수 있으며, 여기서 백분율은 개체의 크기에 따라 결정됩니다. 기본값은 0입니다.

길이 값을 사용하여 반사와 물체 사이의 거리를 정의하세요. 부정적일 수 있습니다. 반사와 개체 사이의 거리를 백분율로 정의합니다. 부정적일 수 있습니다.

3. 마스크 상자 이미지는 투영 영역을 덮을 마스크 이미지를 정의합니다. 이 매개변수 값을 생략하면 기본적으로 마스크되지 않은 이미지가 사용됩니다.

값:

none: 마스크 이미지 없음:

절대 또는 상대 주소를 사용하여 마스크 이미지를 지정합니다.

선형 그래디언트를 사용하여 마스크 이미지를 만듭니다.

방사형(방사형) 그라데이션을 사용하여 마스크 이미지를 만듭니다.

반복되는 선형 그래디언트를 사용하여 뒷면 마스크를 만듭니다.

반복 방사형(방사형) 그라데이션을 사용하여 마스크 이미지를 만듭니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,body{
  margin:50px 0;
}
.reflect{
  width:950px;
  margin:0 auto;
  -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
  font:bold 100px/1.231 georgia,sans-serif;
  text-transform:uppercase;
}
</style>
</head>
<body>
<div>你看到倒影了么？</div>
</body>
</html>

로그인 후 복사

렌더링:

CSS3에서 글꼴 반사를 구현하는 방법