CSS 아웃라인 스타일 속성
- 이전 페이지 outline-offset
- 다음 페이지 아웃라인-너비
정의와 사용법
outline-style 속성은 요소 전체의 경계선 스타일을 설정합니다. 스타일이 none이 아니어야 경계선이 나타납니다.
outline(줄기)는 요소 주위에 그려지는 선으로, 경계선 외측에 위치하며 요소를 강조할 수 있습니다. outline 속성은 요소 주위의轮廓선을 설정합니다.
주석:항상 outline-color 속성 앞에서 outline-style 속성을 선언하세요. 요소가轮廓을 가지기 전까지는轮廓의 색상을 변경할 수 없습니다.
주석:줄기선은 공간을 차지하지 않으며, 반드시 사각형이 아닙니다.
또한 참조:
CSS 교육:CSS 텍스트-웨이어
CSS 참조 설명서:outline 속성
HTML DOM 참조 설명서:outlineStyle 속성
CSS 문법
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| none | 기본.轮廓 없음을 정의합니다. |
| hidden | 숨긴轮廓을 정의합니다. |
| dotted | 점상태轮廓을 정의합니다. |
| dashed | 점선轮廓을 정의합니다. |
| solid | 실선轮廓을 정의합니다. |
| double | 선형轮廓을 정의합니다. 선형의 너비는 outline-width 값과 동일합니다. |
| groove | 3D 들여쓰형 슬롯轮廓을 정의합니다. 이 효과는 outline-color 값에 따릅니다. |
| ridge | 3D 돌출형 슬롯轮廓을 정의합니다. 이 효과는 outline-color 값에 따릅니다. |
| inset | 3D 들여쓰형轮廓을 정의합니다. 이 효과는 outline-color 값에 따릅니다. |
| outset | 3D 돌출형轮廓을 정의합니다. 이 효과는 outline-color 값에 따릅니다. |
| inherit | 부모 요소에서轮廓 스타일 설정을 상속받아야 합니다. |
기술적인 세부 사항
| 기본값: | none |
|---|---|
| 상속성: | no |
| 버전: | CSS2 |
| JavaScript 문법: | object.style.outlineStyle="dotted" |
TIY 예제
- 轮廓의 스타일 설정
- 이 예제에서는轮廓의 스타일을 설정하는 방법을 설명합니다.
브라우저 지원
표에서는 이 속성을 완벽히 지원하는 최초 브라우저 버전이 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
주석:DOCTYPE이 지정되면 IE8에서 outline 속성이 지원됩니다.
- 이전 페이지 outline-offset
- 다음 페이지 아웃라인-너비
