CSS 텍스트 그림자 속성

기본 텍스트 그림자:

h1 {
text-shadow: 2px 2px #ff0000;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 text-shadow텍스트에 그림자를 추가합니다.

이 속성은 텍스트에 적용할 쉼표로 구분된 그림자 목록을 허용합니다.

기본값:	없음
상속:	네
애니메이션 가능:	예. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.textShadow="2px 5px 5px 빨간색"

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
text-shadow	4.0	10.0	3.5	4.0	9.6

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

참고: 텍스트에 둘 이상의 그림자를 추가하려면 쉼표로 구분된 그림자 목록을 추가하십시오.

Value	Description	Play it
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur-radius	Optional. The blur radius. Default value is 0
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
none	Default value. No shadow
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

흐림 효과가 있는 텍스트 그림자:

h1 {
text-shadow: 2px 2px 8px #FF0000;
}

흰색 텍스트에 텍스트 그림자:

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

빨간색 네온 불빛이 있는 텍스트 그림자:

h1 {
text-shadow: 0 0 3px #FF0000;
}

빨간색과 파란색 네온 광선이 있는 텍스트 그림자:

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}