> 웹 프론트엔드 > CSS 튜토리얼 > CSS3의 텍스트 비우기, 투명도 및 그림자 효과 설정

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

不言
풀어 주다: 2018-06-14 17:15:36
원래의
5106명이 탐색했습니다.

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

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

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;
로그인 후 복사

효과 2


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

201637105111410.png (752×75)

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;
로그인 후 복사

Effect201637105151945.png (609×90)

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

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

Code

201637105229256.png (620×72)

box-reflect:none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*
로그인 후 복사

Effect


다중 그림자:
Code

text-shadow:2px 2px 0 #000;
로그인 후 복사

Effect


위 내용은 모두의 학습에 도움이 되기를 바랍니다. ! 201637105301417.png (622×53)

관련 권장 사항:



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

CSS3에서 레이어 그림자 및 텍스트 그림자 사용201637105352727.png (596×46)


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


201637105420741.png (578×52)

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿