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;}

콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습니다.

이 글은...

• 과거 이 블로그의 글을 정리 후 재 발행하는 글입니다.
• 2011.09.27 16:31: 첫 발행
• 2016.07.15 23:02: 2차 발행