수색…


통사론

  • 개요 : 개요 - 색상 개요 - 스타일 개요 - 폭 | 초기 | 상속하다;
  • 개요 - 너비 : 중간 | 얇은 | 두꺼운 | 길이 | 초기 | 상속하다;
  • outline-style : none | 숨겨진 | 점선 | 대시 | 고체 | 더블 | 그루브 | 능선 | 인세트 | 시작 | 초기 | 상속하다;

매개 변수

매개 변수 세부
점이 찍힌 점선으로 된 개요
대시의 파선 테두리
고체 단색 개요
더블 이중 윤곽선
3D 그루브 외곽선, 윤곽선 색상 값에 따라 다름
산등성이 3D 라이팅 된 외곽선, 외곽선 색상 값에 따라 다름
삽입하다 3D 인세 트 개요, 윤곽선 색상 값에 따라 다름
시초 3D 아웃 라인 개요, 윤곽선 색상 값에 따라 다름
없음 개략 없음
숨겨진 숨겨진 개요

비고

outline 는 이제 Basic UI , CSS 모듈 레벨 3 (이미 REC CSS2.1에 설명되어 있음)에서 설명합니다.


외곽선 속성은 :focus 상태 요소에서 브라우저에서 기본적으로 정의됩니다 :focus 상태입니다.
제거해서는 안됩니다. http://outlinenone.com 을 참조하십시오.

개요 속성은 무엇을합니까?

Tab 키 (또는 이와 동등한 도구)를 사용하여 웹 문서를 탐색 할 때 "포커스"가있는 링크에 대한 시각적 피드백을 제공합니다. 이것은 마우스를 사용할 수 없거나 시각 장애가있는 사람들에게 특히 유용합니다. 윤곽선을 제거하면이 사람들을 위해 사이트에 액세스 할 수 없게됩니다. (...)

스택 오버플로에 대한 흥미로운 관련 예제 :

개요

윤곽선은 테두리를 벗어나 요소 주위로 이동하는 선입니다. border 과 대조적으로 외곽선은 상자 모형에 공간을 차지하지 않습니다. 따라서 요소에 윤곽선을 추가해도 요소 또는 다른 요소의 위치에는 영향을주지 않습니다.

또한 아웃 라인은 일부 브라우저에서는 직사각형이 아닐 수 있습니다. 이는 font-size 속성이 다른 텍스트가있는 span 요소에 outline 이 적용된 경우에 발생할 수 있습니다. 테두리와 달리 외곽선은 둥근 모서리를 가질 수 없습니다 .

outline 의 핵심 부분은 outline outline-color , outline-styleoutline-width 입니다.

외곽선의 정의는 경계의 정의와 같습니다.

윤곽선은 요소 주위의 선입니다. 요소의 여백 주위에 표시됩니다. 그러나 경계 속성과 다릅니다.

outline: 1px solid black;

윤곽선 스타일

outline-style 속성은 요소의 윤곽선 스타일을 설정하는 데 사용됩니다.

p {
  border: 1px solid black;
  outline-color:blue;
  line-height:30px;
}
.p1{
  outline-style: dotted;
}
.p2{
  outline-style: dashed;
}
.p3{
  outline-style: solid;
}
.p4{
  outline-style: double;
}
.p5{
  outline-style: groove;
}
.p6{
  outline-style: ridge;
}
.p7{
  outline-style: inset;
}
.p8{
  outline-style: outset;
}

HTML

<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>

여기에 이미지 설명을 입력하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow