CSS의 ‘테두리’와 ‘개요’속성의 차이점을 아는 사람이 있습니까? 차이가 없다면 왜 같은 것에 대해 두 가지 속성이 있습니까?
답변
보낸 사람 : http://webdesign.about.com/od/advancedcss/a/outline_style.htm
CSS 아웃 라인 속성은 혼란스러운 속성입니다. 처음 배우면 border 속성과 어떻게 다른지 이해하기 어렵습니다. W3C는 다음과 같은 차이점이 있다고 설명합니다.
1. 개요는 공간을 차지하지 않습니다.
2. 개요는 직사각형이 아닐 수 있습니다.
답변
다른 답변 외에도 다음과 같은 몇 가지 차이점이 있습니다.
1) 둥근 모서리
borderborder-radius속성으로 둥근 모서리를 지원 합니다. outline하지 않습니다.
(NB : firefox 에는 -moz-outline-radius개요에 둥근 모서리를 허용 하는 속성이 있지만 …이 속성은 CSS 표준에 정의되어 있지 않으며 다른 브라우저 ( source )에서 지원되지 않습니다 )
2) 한쪽 만 스타일링
테두리 스타일로 각면에 특성이 border-top:, border-left:등
개요는 이것을 할 수 없습니다. 개요가 없습니다 : 등. 그것은 전부 또는 아무것도 아닙니다. ( 이 SO 포스트 참조 )
3) 오프셋
outline은 outline-offset 속성을 사용하여 오프셋을 지원합니다 . 테두리가 없습니다.
참고 : outline-offsetInternet Explorer를 제외한 모든 주요 브라우저 지원
답변
다른 답변 외에도 개요는 일반적으로 디버깅에 사용됩니다. Opera에는 outline 속성을 사용하여 문서의 모든 요소가있는 위치를 보여주는 멋진 CSS 스타일이 있습니다.
예상 한 위치 또는 예상 크기로 요소가 표시되지 않는 이유를 찾으려면 몇 가지 개요를 추가하고 요소의 위치를 확인하십시오.
이미 언급했듯이 개요는 공간을 차지하지 않습니다. 테두리를 추가하면 문서에서 요소의 총 너비 / 높이가 증가하지만 윤곽선에서는 발생하지 않습니다. 또한 테두리와 같은 특정면에 윤곽선을 설정할 수 없습니다. 전부 아니면 아무것도 아니야
답변
tldr;
W3C는 다음과 같은 차이점이 있다고 설명합니다.
- 윤곽선은 공간을 차지하지 않습니다.
- 윤곽선은 직사각형이 아닐 수 있습니다.
접근성을 위해 개요를 사용해야합니다
개요의 주요 목적은 접근성입니다. 개요로 설정 : 피해야 할 것은 없습니다.
제거해야하는 경우 대체 스타일을 제공하는 것이 좋습니다.
outline : none 또는 outline : 0을 사용하여 초점 표시기를 제거하는 방법에 대한 몇 가지 팁을 보았습니다. 윤곽선을 다른 요소로 바꾸지 않고 키보드 포커스가있는 요소를 쉽게 확인할 수있는 경우가 아니면이 작업을 수행하지 마십시오. 키보드 포커스의 시각적 표시기를 제거하면 키보드 탐색에 의존하는 사람들이 사이트를 탐색하고 사용하는 데 어려움을 겪을 수 있습니다.
출처 : “링크 및 양식 컨트롤에서 윤곽선을 제거하지 마십시오”, 365 Berea Street
추가 자료
답변
윤곽선을 실제로 사용하면 투명성이 처리됩니다. 배경이있는 부모 요소가 있지만 자식 요소의 테두리를 투명하게하여 부모의 배경이 보이게하려면 “테두리”대신 “개요”를 사용해야합니다. 테두리는 투명 할 수 있지만 부모의 배경이 아니라 자녀의 배경을 나타냅니다.
즉,이 설정은 다음과 같은 효과를 만들었습니다.
outline: 7px solid rgba(255, 255, 255, 0.2);
답변
W3 학교 사이트에서
CSS 국경 속성은 요소의 테두리 스타일과 색상을 지정할 수 있습니다.
개요 (경계선을) 요소를 주위에 그려지는 선 요소 “눈에 띄는”를 만드는 것입니다.
아웃 라인 속기 속성은 한 번의 선언으로 모든 아웃 라인 속성을 설정합니다.
설정할 수있는 속성은 외곽선 색상, 외곽선 스타일, 외곽선 너비의 순서입니다.
위의 값 중 하나가 누락 된 경우 (예 : “outline : solid # ff0000;”) 누락 된 속성의 기본값이 있으면 삽입됩니다.
자세한 내용은 여기를 확인하십시오 :
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
답변
조금 오래된 질문이지만, 모든 하위 요소가 부모를 넘치더라도 (음수 여백, 상자 그림자를 통해) 외곽선이 렌더링되는 Firefox 렌더링 버그 (여전히 ’13 년 1 월 현재 존재)를 언급 할 가치가 있습니다. 등)
이 문제를 다음과 같이 해결할 수 있습니다.
.container {
position: relative;
}
.container:before {
content: '';
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 1px solid #ff0000;
}불행히도 여전히 고정되어 있지 않습니다. 많은 경우 윤곽선이 요소의 치수에 추가되지 않기 때문에 요소의 치수를 설정할 때 항상 테두리 너비를 고려할 필요가 없으므로 윤곽선을 선호합니다.
결국, 어느 것이 더 간단합니까?
.container {
width: 960px;
height: 300px;
outline: 3px solid black;
}또는:
.container {
width: 954px;
height: 294px;
border: 3px solid black;
}