단락의 각 줄에 대한 그라데이션 색상 텍스트 효과

이번에는 문단의 각 줄에 대한 그라데이션 텍스트 효과를 가져옵니다. 문단의 각 줄에 대한 주의사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

오늘 Codepen에서 CSS로 작성된 효과를 봤습니다. 단락의 각 텍스트 줄에는 그라데이션 효과가 있습니다. 한 줄의 텍스트나 한 단어에 대해 그라데이션 채우기 효과를 구현하는 것은 이상한 일이 아니지만, 이는 단락의 각 줄에 대한 텍스트 그라데이션 채우기 효과입니다. 여전히 많은 이들의 궁금증을 자아낼 것으로 추정된다. 궁금하신 분들은 꼭 읽어보시고 알아보세요!

타겟 효과

오늘의 타겟 효과는 다음과 같은 효과를 달성하거나, 이 효과를 만들기 위한 팁을 이해하는 것입니다.

위 효과를 보시면 많은 분들이 먼저 생각하실 것 같아요. 배경 클립:텍스트, 색상:투명 및 선형 그라데이션으로 수행됩니다. 그렇다면 이것이 사실입니까?

문단의 각 텍스트 줄에 그라데이션 효과를 완성하는 방법

CSS를 아는 학생은

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;

를 사용하여 텍스트의 그라데이션 채우기 효과를 쉽게 얻을 수 있다는 것을 알고 있습니다. 예를 들어, 다음 예는

약간의 실험을 해보겠습니다. 텍스트가 단어나 한 줄이 아니라 전체 문단이면 어떤 효과가 있을까요?

효과도 완벽한 것 같아요. 그라디언트 효과의 매개변수를 변경하면 그라디언트 효과는 비스듬한 각도가 됩니다.

background-image: linear-gradient(135deg, deeppink, dodgerblue);

두 효과를 살펴보세요.

자세히 살펴보세요. 두 효과 사이에는 여전히 차이가 있습니다. 먼저 동일한 크기의 컨테이너를 살펴보겠습니다(이 예에서 p 요소의 크기는 765px * 165px입니다). 두 가지 다른 그라데이션 효과의 경우 먼저 오른쪽의 채우기 효과를 살펴보세요.

그런 다음 135deg를 살펴보세요. one 채우기 효과:

이제 여기까지 오셨으니 이전 예와 무엇이 다른지 아실 겁니다. 그리고 그 이유가 무엇인지 아시나요? 다양한 그라디언트를 사용하여 단락의 각 줄에 동일한 채우기 효과를 적용하려면 어떻게 해야 합니까? 구현하기 전에 간략하게 요약해 보겠습니다.

단어, 한 줄의 텍스트, 여러 줄의 텍스트 등 선형 그라데이션에서 오른쪽이나 왼쪽으로 사용하면 결과로 나타나는 텍스트 채우기 효과는 동일합니다. 그러나 다른 그라데이션 각도 매개변수의 경우 여러 줄의 텍스트 채우기에서 각 줄의 효과가 달라집니다.

주제로 돌아가시겠어요? 여러 행을 달성하고 채우기 각도에 관계없이 동일한 효과를 얻는 방법은 무엇입니까? 이 효과를 달성하기 위한 핵심 속성이 있습니다. box-decoration-break。简单的说一下，box-decoration-break 속성에는 슬라이스와 복제라는 두 가지 속성 값이 있으며 해당 효과는 다음과 같습니다.

는 단락에서 사용되며 효과는 다음과 같습니다.

우리 목표에서 점점 멀어지고 있는 걸까요? 그런 다음 이 예에서는 box-꾸밈-break:clone 속성을 사용합니다.

background-image: linear-gradient(135deg, deeppink, dodgerblue);
background-clip: text;
-webkit-background-clip: text;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: transparent;

효과는 다음과 같습니다.

예상 효과를 충족하는지 확인해 보겠습니다.

팁: box-design-break는 인라인 요소에 적용되며 해당 line-height와 일치하여 줄 사이에 일정한 간격을 허용합니다.

돌이켜보면, 인라인 요소와 블록 요소 사이에 box-Decoration-Break를 사용하는 경우의 차이점을 살펴보겠습니다.

완벽하지 않나요? 원한다면 직접 시도해 보세요.

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

추천 자료:

H5에서 APP 청취 반환 이벤트 처리

텍스트 텍스처 오버레이를 구현하는 프런트엔드 기술

위 내용은 단락의 각 줄에 대한 그라데이션 색상 텍스트 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!