CSS 팁 단락의 각 줄에 그라데이션 텍스트 효과를 구현하는 방법

오늘 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 속성은 Slice와 Clone이라는 두 가지 속성값을 가지며, 그에 따른 효과는 다음과 같습니다.

는 문단에서 사용되며, 그 효과는 다음과 같습니다. 우리 목표와는 거리가 멀어요. 그런 다음 이 예에서는 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-장식-break 인라인 요소에 적용되고 해당 줄 높이와 일치하여 줄 사이에 일정한 간격을 허용합니다.

돌이켜보면, box-Decoration-break를 사용하는 것이 인라인 요소와 블록 요소의 차이입니다.

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

관련 추천:

javascript 계산 그라데이션 색상 예제 공유

html5 캔버스 그리기 방사성 그라데이션 색상 효과 코드 예제

div+css 배경 그라데이션 색상 코드 예제

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