CSS 개요
윤곽선은 요소의 테두리 외부에 그려진 선입니다.
CSS 개요
윤곽선은 요소를 "눈에 띄게" 만들기 위해 테두리 OUTSIDE 요소 주위에 그려지는 선입니다.
CSS에는 다음과 같은 개요 속성이 있습니다.
-
outline-style
-
outline-color
-
outline-width
-
outline-offset
-
outline
참고: 아웃라인은 테두리 와 다릅니다 ! 테두리와 달리 윤곽선은 요소의 테두리 외부에 그려지며 다른 내용과 겹칠 수 있습니다. 또한 윤곽선은 요소 차원의 일부가 아닙니다. 요소의 전체 너비와 높이는 윤곽선 너비의 영향을 받지 않습니다.
CSS 개요 스타일
이 outline-style
속성은 윤곽선의 스타일을 지정하며 다음 값 중 하나를 가질 수 있습니다.
dotted
- 점선 윤곽을 정의합니다.dashed
- 점선 윤곽을 정의합니다.solid
- 실선을 정의합니다.double
- 이중 윤곽선 정의groove
- Defines a 3D grooved outlineridge
- Defines a 3D ridged outlineinset
- Defines a 3D inset outlineoutset
- Defines a 3D outset outlinenone
- Defines no outlinehidden
- Defines a hidden outline
The following example shows the different outline-style
values:
Example
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style
property is set!