text-shadow는 글자 그대로 글자에 그림자 효과를 적용해 주는 속성입니다.

| 사용

1. 기본 사용법

text-shadow는 기본적으로

그림자의 x축 거리, y축 거리, 블러효과 반경, 색상으로 구성이 됩니다.

text-shadow: offset-x | offset-y | blur-radius | color

text-shadow: 1px 5px 5px green;

x축 거리와 y축 거리는 필수 요소입니다.

<div>

<h1>안녕하세요</h1>

</div>

div {

background-color: black;

width: 200px;

text-align: center;

}

h1 {

text-shadow: 1px 1px 7px white;

color: white;

}

이런 식으로 형광 느낌의 효과도 줄 수 있습니다.

<h1>안녕하세요</h1>

h1 {

text-shadow: 3px 3px green, 6px 6px red, 9px 9px blue;

}

이런 식으로 쉼표로 구분하여 그림자를 중첩시킬 수 있습니다.