텍스트에 그림자 효과 추가하기
text-shadow 속성을 사용하여 텍스트에 그림자 효과를 줄 수 있습니다.
text-shadow: none | <가로거리> <세로거리> <번짐정도> <색상>
| 속성 값 | 설명 |
|---|---|
| <가로거리> | 텍스트부터 그림자까지의 가로 거리를 입력합니다 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만듭니다.필수속성 |
| <세로거리> | 텍스트부터 그림자까지의 세로 거리를 입력합니다 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듭니다.필수속성 |
| <번짐정도> | 그림자가 번지는 정도를 나타냅니다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시됩니다. 기본값은 0입니다. |
| <색상> | 그림자 색상을 지정합니다. 한 가지만 지정할 수도 있고, 공백으로 구분해 여러 색상을 지정할 수도 있습니다. 기본값은 현재 글자 색입니다. |
보통 그림자값은 하나만 사용하지만 여러개를 사용하면 마치 그래픽으로 처리한 듯한 효과를 줄수 있습니다.
<p style="font-size:60px; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;">text-shadow</p>
text-shadow