수색…
통사론
- 개요 : 개요 - 색상 개요 - 스타일 개요 - 폭 | 초기 | 상속하다;
- 개요 - 너비 : 중간 | 얇은 | 두꺼운 | 길이 | 초기 | 상속하다;
- 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-style 및 outline-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>
