CSS3 튜토리얼 (4): 웹 페이지 테두리 및 웹 페이지 텍스트

웹 페이지 제작 Webjx 기사 소개: Shadows는 CSS2부터 있었지만 Safari에서만 지원하며 이는 오늘날에도 마찬가지입니다. 그림의 그림자 효과처럼 CSS3에서는 테두리와 텍스트에 그림자를 적용할 수 있습니다. 그림자는 CSS2부터 있었지만 브라우저는 Safari뿐입니다.

그림자는 CSS2부터 있었습니다. 예, 하지만 Safari만이 이를 지원하며 오늘날에도 여전히 그렇습니다. 그림자는 이미지의 그림자 효과처럼 CSS3의 테두리와 텍스트에 적용할 수 있습니다.
그림자는 CSS2부터 있었지만 Safari에서만 지원하며 오늘날에도 마찬가지입니다. 이미지의 그림자처럼 CSS3의 테두리와 텍스트에 그림자를 적용할 수 있습니다.
이전 기사에서 소개한 내용: CSS3 튜토리얼(3): border-color 웹 페이지 테두리 색상
일반적으로 box-shadow와 textshadow 두 가지 범주로 나눌 수 있습니다.
CSS3 box-shadow 및 textshadow는 다음과 같이 작성할 수 있습니다: box-shadow:Apx Bpx Cpx #xxx;
Apx = x축
Bpx = y축
Cpx = 투영 길이
#XXX = 평소와 같은 색상
이를 이해하면 다음과 같은 방식으로 경험할 수 있습니다...
브라우저 호환성:
이전 소개에서 모든 브라우저가 모든 브라우저가 아니라는 점을 명시했습니다. CSS3를 지원합니다. CSS3 그림자 효과를 지원하는 최고의 브라우저는 Safari입니다. 즉, 이제 Knife-webkit 접두사만 사용하면 됩니다.

#boxShadow{ border: 5px solid #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-bottom-right-radius: 15px; padding: 15px 25px; height: acquire; width: 590px; }
이 효과는 사진에도 사용할 수 있습니다...
브라우저 지원:

FireFox(3.0.5) - [FireFox(3.1 PreAlpha) 호환]

Google Chrome(1.0.154.)

Google Chrome(2.0.156.)( 지원 별로 좋지 않음)

Internet Explorer(IE7/IE8 RC1)

Opera(9.6)

Safari(3.2.1, Windows)
간단한 텍스트 그림자:

.textShadowSingle { 글꼴 크기: 3.2em; 색상: #F5F5F5; 텍스트-그림자: 3px 3px 7px #111 }
찾아보기 서버 지원:

FireFox(3.0.5) - [FireFox(3.1 PreAlpha) 호환]

Google Chrome(1.0.154.)

Google Chrome(2.0. 156 .) (지원이 별로 좋지 않음)

Internet Explorer(IE7/IE8 RC1)

Opera(9.6)

Safari(3.2.1, Windows)
다중 TextShadow

.textShadowMultiple { 글꼴 크기: 3.2em; 색상: #FFF; 텍스트 그림자: 0px -11px 10px #C60, 0px -3px 9px #FF0 ; text-align: center; padding: 10px 0px 5px 0px; 배경: #151515; }
브라우저 지원

FireFox(3.0.5) - [FireFox(3.1 PreAlpha) 호환]