text-shadow 속성

text-shadow 속성은 텍스트에 그림자를 지정합니다. 속성 값은 공백으로 구분된 4 개의 매개변수를 받거나, 그림자를 완전히 취소하는 키워드 none를 받습니다 (이것이 기본값입니다).

문법

css선택자 {
  text-shadow: x_이동 y_이동 흐림 색상;
}

css선택자 {
  text-shadow: none;
}

매개변수	설명
x 이동	X축을 따라 그림자의 이동을 지정합니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.
y 이동	Y축을 따라 그림자의 이동을 지정합니다. 양수 값은 아래로, 음수 값은 위로 이동시킵니다.
흐림	그림자의 흐림 정도를 지정합니다. 값이 클수록 그림자가 더 흐려집니다. 선택적 매개변수. 지정하지 않으면 그림자가 선명합니다.
색상	색상 단위로 그림자 색상을 지정합니다. 선택적 매개변수. 지정하지 않으면 그림자 색상은 텍스트 색상과 같습니다.

축 이동 및 흐림 값은 백분율을 제외한 모든 크기 단위로 지정할 수 있습니다.

그림자를 아래와 왼쪽으로 이동시키고 약간의 흐림을 추가해 봅시다:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

이번에는 그림자 색상을 빨간색으로 하고 아래와 왼쪽으로 이동시키지만, 흐림을 제거하여 그림자를 선명하게 만들어 봅시다:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

이제 그림자는 이동되지 않았지만 흐림이 추가되었습니다:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат: