CSS3의 텍스트 비우기, 투명도 및 그림자 효과 설정

이 글에서는 CSS에서 텍스트 비우기, 투명도 값, 그림자 효과 설정에 대한 예시를 주로 소개합니다. 텍스트-획-색상 투명도 값을 설정하면 텍스트가 어느 정도 부드러워질 수 있으니 참고하세요

text-fill-color는 빈 텍스트를 만듭니다.

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;

효과 2

비교해보면 효과 2의 텍스트가 효과 1

text-shadow text-shadow

구문: ​​

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;

그림자 텍스트 예를 구현해 보겠습니다.

Code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;

Effect

text-shadow에는 3개의 길이 매개변수가 있습니다. 첫 번째는 수평 오프셋을 나타내고, 두 번째는 수직 오프셋을 나타내고, 세 번째는 흐림을 나타냅니다(선택 사항)

더 부드러운 텍스트 그림자:

Code

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

Effect

다중 그림자:Code

text-shadow:2px 2px 0 #000;

Effect

위 내용은 모두의 학습에 도움이 되기를 바랍니다. !

관련 권장 사항:

CSS3을 사용하여 기본 그래픽 그리기

CSS3에서 레이어 그림자 및 텍스트 그림자 사용

반복 표시를 피하기 위해 CSS를 사용하여 배경 이미지를 늘리고 채우는 방법

위 내용은 CSS3의 텍스트 비우기, 투명도 및 그림자 효과 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!