textShadow 속성 스타일링

정의와 사용법

textShadow 속성 설정 또는 텍스트에 하나나 여러 개의 그림자 효과를 반환합니다.

추가로 참조하십시오：

CSS 가이드CSS 텍스트 그림자

CSS 참조 가이드text-shadow 속성

예제

예제 1

텍스트에 그림자 추가：

document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000, 10px 10px 1px #0000ff";

직접 시험해 보세요

예제 2

텍스트 그림자 반환：

alert(document.getElementById("myP").style.textShadow);

직접 시험해 보세요

문법

textShadow 속성 반환：

object.style.textShadow

textShadow 속성 설정：

object.style.textShadow = "none|h-shadow v-shadow blur color|initial|inherit"

주석：textShadow 속성은 텍스트에 하나나 여러 개의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 그림자 목록으로, 각 그림자는 2개나 3개의 길이 값과 선택 사항 색상으로 정의됩니다. 생략된 길이는 0입니다.

속성 값

값 설명
none 그림자를 그리지 않습니다. 기본 값.
h-shadow 필수. 수평 그림자의 위치. 음수 값을 허용합니다.
v-shadow 필수. 수직 그림자의 위치. 음수 값을 허용합니다.
blur 선택 사항. 흐림 거리.
color

선택 사항. 그림자의 색상.

보기 CSS 색상 값가능한 색상 값의 전체 목록을 얻으려면
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： none
반환 값： 문자열로, 요소 텍스트에 적용되는 그림자 효과 목록을 쉼표로 구분합니다.
CSS 버전： CSS3

브라우저 지원

표의 숫자는 이 속성을 최초로 완전 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 10.0 지원 지원 지원