텍스트 윤곽선 효과란 무엇입니까?

때로는 텍스트의 윤곽선만 표시하고 텍스트의 패딩을 제거해야 하는 경우가 있습니다. 윤곽효과라고도 할 수 있습니다.

다양한 CSS 속성을 사용하여 텍스트의 윤곽선 효과를 생성할 수 있습니다. 예를 들어, 텍스트에 테두리를 추가하고, 텍스트 채우기 색상을 제거하고, 텍스트에 윤곽선 효과를 추가할 수 있습니다.

여기에서는 HTML과 CSS의 세 가지 방법을 사용하여 윤곽선 효과로 텍스트를 표시합니다.

다양한 CSS 속성 사용

이 방법에서는 세 가지 CSS 속성을 사용하여 텍스트에 윤곽선 효과를 추가합니다. 첫 번째는 텍스트 채우기 색상을 배경색과 동일하게 변경하는 "-webkit-text-fill-color"입니다. 두 번째는 텍스트에 획 너비를 추가하는 "-webkit-text-lines-width"이고, 세 번째 CSS 속성은 텍스트에 윤곽선 색상을 추가하는 "-webkit-text-lines-color"입니다.

문법

사용자는 세 가지 다른 CSS 속성을 사용하여 다음 구문에 따라 텍스트에 윤곽선 효과를 추가할 수 있습니다.

으아악

위 구문에서는 텍스트의 채우기 색상과 획 너비를 설정하고 획은 윤곽선 색상을 나타냅니다.

예제 1

의 중국어 번역은 다음과 같습니다.

예제 1

아래 예에는 텍스트가 포함된 클래스 이름이 'text1'인 div 요소가 있습니다. CSS에서 텍스트의 글꼴 크기를 설정했습니다. 또한 텍스트에 윤곽선 효과를 추가하기 위해 채우기 색상을 흰색, 획 너비를 '1px', 획 색상을 '파란색'으로 설정하여 파란색 윤곽선을 표시했습니다.

출력에서 사용자는 파란색 윤곽선으로 텍스트를 관찰할 수 있습니다.

으아악

예 2

는 다음과 같이 번역됩니다.

예 2

아래 예에서는 div 요소에 빨간색 배경을 설정했습니다. 다음으로 채우기 색상으로 '빨간색'을 사용하여 채우기 색상을 배경과 동일하게 만듭니다. 여기서 획 너비는 '1.2px'이고 획 색상은 '노란색'입니다.

출력에서 사용자는 빨간색 배경에 노란색 윤곽선이 있는 텍스트를 관찰할 수 있습니다.

으아악

"텍스트 그림자" CSS 속성을 사용하세요

이 방법에서는 "text-shadow" CSS 속성을 사용하여 텍스트에 윤곽선 효과를 생성합니다. 텍스트 색상을 배경색과 동일하게 설정하여 텍스트를 숨기고 텍스트 그림자만 표시하면 윤곽선 효과를 낼 수 있습니다.

문법

사용자는 다음 구문에 따라 "text-shadow" CSS 속성을 사용하여 텍스트에 윤곽선 효과를 추가할 수 있습니다.

으아악

"text-shadow" 속성은 그림자를 설정하기 위해 4가지 다른 값을 사용합니다. 첫 번째는 x 오프셋, 두 번째는 y 오프셋, 세 번째는 흐림 값, 네 번째는 그림자 색상입니다.

예시 3

번역 없이 보관해도 됩니다.

아래 예에서는 div 요소에 텍스트가 포함되어 있습니다. CSS에서는 배경색과 글꼴 색상을 동일하게 설정했습니다. 그런 다음 'text-shadow' CSS 속성을 사용하여 윤곽선 효과를 추가했습니다. 여기서는 'text-shadow' 값으로 4대 4 값을 사용했습니다. 첫 번째 쌍은 오른쪽 그림자용, 두 번째 쌍은 아래쪽 그림자용, 세 번째 쌍은 왼쪽 그림자용, 마지막 쌍은 위쪽 그림자용입니다.

실제로는 획 대신 텍스트 그림자를 표시하여 윤곽선 효과를 만듭니다.

으아악

여기서 텍스트를 SVG 이미지로 변환합니다. 그런 다음 획 색상, 채우기 색상, 획 너비 등을 설정하고 다양한 CSS 속성을 사용하여 텍스트에 윤곽선 효과를 추가하겠습니다.

문법

사용자는 다음 구문에 따라 텍스트를 SVG로 변환하여 텍스트에 윤곽선 효과를 추가할 수 있습니다.

으아악

위 구문에서는 텍스트 채우기 색상을 설정했습니다. 또한 텍스트의 획 색상을 설정합니다. "paint-order: 스트로크" CSS 속성을 사용하면 채우기 색상이 서로 교차할 때 스트로크를 통해 채우기 색상을 겹칠 수 있습니다.

예 4

의 중국어 번역은 다음과 같습니다.

예 4

아래 예에서는

으아악

텍스트에 윤곽선 효과를 추가하는 세 가지 방법을 살펴보았습니다. 첫 번째 방법은 세 가지 CSS 속성을 사용하여 텍스트 채우기 색상을 변경하고 텍스트 획을 설정합니다.

두 번째 방법은 텍스트를 표시하는 대신 "텍스트 그림자"를 표시합니다. 세 번째 방법은 텍스트를 SVG로 변환하고 다양한 SVG 관련 CSS 속성을 사용하여 텍스트에 윤곽선 효과를 추가하는 것입니다.

위 내용은 텍스트 윤곽선 효과란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!