익히기 쉬운 세 가지 작은 특수 효과 - 텍스트 비우기, 투명도 및 그림자 효과

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

text-fill-color:
코드

CSS 코드클립보드에 콘텐츠 복사

1. -webkit-text-fill-

   색상:투명

2. -webkit -텍스트 획:

   1px #000; -획 색상 투명도 값은 텍스트를 더 부드럽게 만듭니다.

   코드

CSS 코드
클립보드에 콘텐츠 복사

Background-image

:-webkit-linear-gradient(#eee, #000);

1. -webkit-배경-클립

   -webkit-text-fill-
색상
2. :

   투명 클립보드에 콘텐츠 복사

3. 배경 이미지:-webkit-linear-gradient(#eee,#000

   ) >
-webkit-text-fill-

색상

:
투명;

-webkit-text-Stroke:1px 투명;

1. 효과 2

   비교해보면 효과 2의 텍스트가 효과 1의 텍스트보다 더 선명하다는 것을 알 수 있습니다. 더 부드럽습니다text-shadow

구문:

2. CSS 코드클립보드에 콘텐츠 복사

3. box -reflect: 없음 | [ {2,3} && <color> ][ , < ;length>{2,3} && <

   color
>? ]*

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

CSS 코드

클립보드에 콘텐츠 복사

text-shadow:
2px

2px

0 #000 ;

효과

1. text-shadow에는 3개의 길이 매개변수가 있습니다. 첫 번째는 수평 오프셋을 나타내고 두 번째는 수직 오프셋을 나타냅니다. , 세 번째는 흐림을 나타냅니다(선택 사항) 부드러운 텍스트 그림자: 코드

   CSS 코드

클립보드에 콘텐츠 복사

텍스트 그림자:1px

1px

1. 5px #000 코드CSS 코드클립보드에 콘텐츠 복사

text-shadow

:

1px

1픽셀

5픽셀 #000

효과

위 내용은 익히기 쉬운 세 가지 작은 특수 효과 - 텍스트 비우기, 투명도 및 그림자 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!