CSS / text-shadow - 글자에 그림자 효과를 주는 속성

개요

text-shadow는 글자에 그림자 효과를 주는 속성입니다.

  • 기본값 : none
  • 상속 : Yes
  • 애니메이션 : Yes
  • 버전 : CSS Level 3

문법

  • offset-x : 그림자의 수평 거리를 정합니다. (필수)
  • offset-y : 그림자의 수직 거리를 정합니다. (필수)
  • blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0)
  • color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값)
  • none : 글림자 효과를 없앱니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다.

예제 2

offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동합니다.

예제 3

blur-radius의 값을 증가시키면 그림자가 흐려집니다.

예제 4

속성값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가 생깁니다.

예제 5

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 3.5+
  • Internet Explorer : 10.0+
  • Opera : 9.6+
  • Safari : 4.0+

CSS 강좌