이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

텍스트 그림자

.NET Framework 3.0

기사 내용

text-shadow 속성
API 참조
샘플 및 자습서
Internet Explorer 테스트 드라이브 데모
IEBlog 게시물
사양
관련 항목

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 CSS3(Cascading Style Sheets, Level 3) text-shadow 속성을 사용한 텍스트 그림자를 지원합니다.

text-shadow 속성

text-shadow 속성은 지정한 텍스트에 그림자 효과를 적용하며 W3C(World Wide Web 컨소시엄) CSS 텍스트 데코레이션 모듈 수준 3에 정의되어 있습니다. box-shadow 속성의 구문을 잘 알고 있다면 text-shadow의 구문도 이미 알고 있는 것입니다. 두 구문은 거의 동일합니다.

속성	설명
text-shadow	지정한 텍스트에 하나 이상의 그림자를 연결하는 쉼표로 구분된 그림자 목록입니다. 각 그림자는 공백으로 구분된 다음 항목의 목록으로 구성됩니다. horizontal offset 필수. 양수 값은 텍스트 오른쪽에 오프셋된 그림자를 그리고, 음수 길이는 왼쪽에 오프셋된 그림자를 그립니다. vertical offset 필수. 양수 값은 텍스트 아래에 오프셋된 그림자를 그리고, 음수 값은 위에 오프셋된 그림자를 그립니다. blur distance 음수 값은 허용되지 않습니다. blur 값이 0이면 그림자 가장자리가 선명합니다. 그렇지 않으면 값이 클수록 그림자 가장자리가 흐려집니다. spread distance 양수 값을 지정하면 그림자 모양이 지정한 반경만큼 모든 방향으로 확장됩니다. 음수 값을 지정하면 그림자 모양이 축소됩니다. 이 값은 일부 브라우저에서 지원되지 않을 수도 있습니다. color 지원되는 CSS 스타일시트 색 값 중 하나입니다.

속성

설명

text-shadow

지정한 텍스트에 하나 이상의 그림자를 연결하는 쉼표로 구분된 그림자 목록입니다. 각 그림자는 공백으로 구분된 다음 항목의 목록으로 구성됩니다.

horizontal offset 필수. 양수 값은 텍스트 오른쪽에 오프셋된 그림자를 그리고, 음수 길이는 왼쪽에 오프셋된 그림자를 그립니다.
vertical offset 필수. 양수 값은 텍스트 아래에 오프셋된 그림자를 그리고, 음수 값은 위에 오프셋된 그림자를 그립니다.
blur distance 음수 값은 허용되지 않습니다. blur 값이 0이면 그림자 가장자리가 선명합니다. 그렇지 않으면 값이 클수록 그림자 가장자리가 흐려집니다.
spread distance 양수 값을 지정하면 그림자 모양이 지정한 반경만큼 모든 방향으로 확장됩니다. 음수 값을 지정하면 그림자 모양이 축소됩니다. 이 값은 일부 브라우저에서 지원되지 않을 수도 있습니다.
color 지원되는 CSS 스타일시트 색 값 중 하나입니다.

text-shadow 속성이 inset 키워드를 인식할 수 없다는 점을 제외하고 box-shadow 속성의 구문은 text-shadow 속성의 구문과 거의 동일합니다.

다음 예제에서는 소량의 흐림 값이 있는 진한 회색 그림자를 지정한 텍스트의 오른쪽 아래에 적용합니다.

CSS


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

짧은 텍스트 블록에 선택기를 적용하면 다음과 같은 결과가 나타납니다.

회색 텍스트 그림자가 적용된 "Internet Explorer 10" 텍스트

W3C에는 text-shadow 도움말 및 예제로 구성된 페이지인 CSS 텍스트 그림자가 있습니다.

텍스트 그림자

text-shadow 속성

API 참조

샘플 및 자습서

Internet Explorer 테스트 드라이브 데모

IEBlog 게시물

사양

관련 항목