CSS 경계선

이 요소는 10px 너비의 검은 경계선과 파란 경계선을 가집니다。

CSS 경계선

경계선은 요소 주위에 그려지는 경계선으로, 경계선 밖에 그려져 요소를 강조합니다。

CSS는 다음과 같은 경계선 속성을 가집니다：

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

주의:경계선과경계선다를 것입니다! 다른 점은 경계선이 요소의 경계선 바깥에 그려지고 다른 내용과 겹칠 수 있다는 점입니다. 또한, 경계선은 요소의 크기의 일부가 아니며, 요소의 전체 너비와 높이는 경계선 너비에 영향을 받지 않습니다.

CSS 경계선 모양

outline-style 속성은 경계선의 모양을 지정하며 다음과 같은 값을 설정할 수 있습니다：

  • dotted 점자의 경계선 모양을 정의합니다。
  • dashed 점선의 경계선 모양을 정의합니다。
  • solid 실선의 경계선 모양을 정의합니다。
  • double 두선의 경계선 모양을 정의합니다。
  • groove 3D 낮은 파이프 모양을 정의합니다。
  • ridge 3D 높은 파이프 모양을 정의합니다。
  • inset 3D 낮은 경계선 모양을 정의합니다。
  • outset 3D 높은 경계선 모양을 정의합니다。
  • none 경계선을 없애는 것을 정의합니다。
  • hidden 비밀로 숨기는 경계선을 정의합니다。

다음은 다른 outline-style 값이 보여지는 예입니다：

예제

모양의 표현을 보여줍니다：

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;}

결과:

점��轮廓.

점선轮廓.

직선轮廓.

두 줄轮廓.

3D 파이프轮廓. 이 효과는 outline-color 값에 따라 달라집니다.

3D 파이프轮廓. 이 효과는 outline-color 값에 따라 달라집니다.

3D 낮은 경계轮廓. 이 효과는 outline-color 값에 따라 달라집니다.

3D 부드러운 경계轮廓. 이 효과는 outline-color 값에 따라 달라집니다.

직접 시도해 보세요

주의:설정되지 않았다면 outline-style 속성이 설정되지 않으면, 다음 장에서 자세히 설명할 다른轮廓 속성은 어떤 효과도 발생하지 않습니다!