CSS 텍스트-셰도우 속성
실례
기본적인 텍스트 셰도우 효과:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
자신이 직접 시도해 보세요
페이지 하단에 더 많은 예제가 있습니다.
CSS 문법
text-shadow: h-shadow v-shadow blur color;
비고:text-shadow 속성은 텍스트에 하나나 여러 개의 셰도우를 추가합니다. 이 속성은 쉼표로 구분된 셰도우 목록으로 정의되며, 각 셰도우는 두 개나 세 개의 길이 값과 선택 사항으로 색상 값을 가집니다. 생략된 길이는 0입니다.
속성 값
| 값 |
설명 |
테스트 |
| h-shadow |
필수. 수평 셰도우 위치. 음수 값을 허용. |
테스트 |
| v-shadow |
필수. 수직 셰도우 위치. 음수 값을 허용. |
테스트 |
| blur |
선택 사항. 흐림 거리. |
테스트 |
| color |
선택 사항. 셰도우의 색상. 참조 CSS 색상 값. |
테스트 |
기술 세부 사항
| 기본 값: |
none |
| thừa kế: |
yes |
| 버전: |
CSS3 |
| JavaScript 문법: |
object.style.textShadow="2px 2px #ff0000" |
브라우저 지원
표에 나타난 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.
| 크롬 |
IE / 엣지 |
파이어폭스 |
사파리 |
오페라 |
| 4.0 |
10.0 |
3.5 |
4.0 |
9.6 |
