outline은 border의 개념과 다릅니다.
요소를 눈에 띄게 만들기위한 방법으로 테두리 외부에 선을 그려주며, 다른 내용과 겹칠 수 있습니다.
요소의 전체 너비, 높이에 영향을 주지 않습니다.
기본적인 사용방법은 border와 비슷하며 outline-offset 속성으로 요소와의 거리를 지정할수 있습니다.
| 속성 | 설명 |
|---|---|
| outline-style | 윤곽선의 표시 방식을 지정합니다. |
| outline-width | 윤곽선의 두께를 지정합니다. |
| outline-color | 윤곽선의 색상을 지정합니다. |
| outline | 윤곽선의 속성을 일괄 적용할때 사용합니다. |
| outline-offset | 윤곽선과 요소와의 거리를 지정합니다. |
outline-style: value|initial|inherit;윤곽선의 표시 방식을 지정합니다.
| none | 기본값, 테투리 표시하지 않음 |
| hidden | |
| dotted | 점선 |
| dashed | 대시 |
| solid | 실선 |
| double | 이중 실선 |
| groove | 오목한 선 |
| ridge | 볼록한 선 |
| inset | 안으로 들어가 보이는 형태(버튼 눌림) |
| outset | 위로 튀어나와 보이는 형태(버튼) |
outline-width: medium|thin|thick|length|initial|inherit;
윤곽선의 두께를 지정합니다.
outline-style 속성이 지정되어 있어야 합니다.
| thin | 얇은 굵기 |
| medium | 기본값, 중간 굵기 |
| thick | 굵은 굵기 |
| length | 단위로 두께를 직접 지정 outline-width:10px; |
outline-color: invert|color|initial|inherit;
윤곽선의 색상을 지정합니다.
outline-style 속성이 지정되어 있어야 합니다.
기본값 invert : 반전된 색상으로 윤곽선을 칠합니다.
outline: outline-width outline-style outline-color|initial|inherit;outline-style은 필수 입력입니다.
outline-offset: length|initial|inherit;윤곽선과 요소와의 거리를 지정합니다