윈컴이의 컴퓨터 이야기
CSS3 Text-Shadow (텍스트 그림자) 본문
CSS3에 추가된 text-shadow 속성은 텍스트에 그림자 효과를 표시합니다.
text-shadow
text-shadow: (오른쪽) (아래) (블러) (색상);
지원 브라우저
IE8 이하를 제외한 대부분의 브라우저에서 지원합니다.
미리보기
예제 1
Text-Shadow 1
<p id="shadow_1">Text-Shadow</p>
#shadow_1 {text-shadow:1px 1px #ccc;}
예제 2
Text-Shadow 2
<p id="shadow_2">Text-Shadow 2</p>
#shadow_2 {text-shadow:-2px -2px 3px #333;}
예제 3
Text-Shadow 3
<p id="shadow_3">Text-Shadow 3</p>
#shadow_3 {text-shadow:0 0 4px white,
0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33,
-2px -15px 11px #FF8800, 2px -25px 18px #FF2200;}
콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습니다.
이 글은...
- 과거 이 블로그의 글을 정리 후 재 발행하는 글입니다.
- : 첫 발행
- : 2차 발행