본문 바로가기
WEB/CSS

[CSS] outline & focus

by DeveloperCat 2023. 10. 14.
반응형
outline

"outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다.

 

See the Pen position-sticky by mirian (@anananananancatdeveloper) on CodePen.

 

  • none : 아웃라인 없음.
  • hidden : 아웃라임 감춤.

 

  • dotted : 둥근 점선

  • dashed : 긴 점선

  • solid : 직선

  • double : 가는 두줄

  • groove : 홈파인 3D 입체 라인. 아웃라인이 파여진 입체로 음각 처리.

  • ridge : 솟아오른 3D 입체 라인. 아웃라인이 솟아오른 입체로 양각 처리.

  • inset : 3D 음각 입체. 요소가 내려가 보이도록 아웃라인 그림자 효과

  • outset : 3D 양각 입체, 요소가 올라와 보이도록 아웃라인 그림자 효과
반응형

'WEB > CSS' 카테고리의 다른 글

[CSS] box-shadow  (0) 2023.10.14
[CSS] overflow: hidden  (0) 2023.10.14
[CSS] ::before & ::after  (0) 2023.10.14
[CSS] z-index  (0) 2023.10.14
[CSS] transform  (0) 2023.10.14