외곽선과 테두리의 차이점

CSS의 '테두리'와 '개요'속성의 차이점을 아는 사람이 있습니까? 차이가 없다면 왜 같은 것에 대해 두 가지 속성이 있습니까?

보낸 사람 : http://webdesign.about.com/od/advancedcss/a/outline_style.htm

CSS 아웃 라인 속성은 혼란스러운 속성입니다. 처음 배우면 border 속성과 어떻게 다른지 이해하기 어렵습니다. W3C는 다음과 같은 차이점이 있다고 설명합니다.

1. 개요는 공간을 차지하지 않습니다.

2. 개요는 직사각형이 아닐 수 있습니다.

다른 답변 외에도 다음과 같은 몇 가지 차이점이 있습니다.

1) 둥근 모서리

borderborder-radius속성으로 둥근 모서리를 지원 합니다. outline하지 않습니다.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

깡깡이

(NB : firefox 에는 -moz-outline-radius개요에 둥근 모서리를 허용 하는 속성이 있지만 ...이 속성은 CSS 표준에 정의되어 있지 않으며 다른 브라우저 ( source )에서 지원되지 않습니다 )

2) 한쪽 만 스타일링

테두리 스타일로 각면에 특성이 border-top:, border-left:등

개요는 이것을 할 수 없습니다. 개요가 없습니다 : 등. 그것은 전부 또는 아무것도 아닙니다. ( 이 SO 포스트 참조 )

3) 오프셋

outline은 outline-offset 속성을 사용하여 오프셋을 지원합니다 . 테두리가 없습니다.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

깡깡이

참고 : outline-offsetInternet Explorer를 제외한 모든 주요 브라우저 지원

다른 답변 외에도 개요는 일반적으로 디버깅에 사용됩니다. Opera에는 outline 속성을 사용하여 문서의 모든 요소가있는 위치를 보여주는 멋진 CSS 스타일이 있습니다.

예상 한 위치 또는 예상 크기로 요소가 표시되지 않는 이유를 찾으려면 몇 가지 개요를 추가하고 요소의 위치를 ​​확인하십시오.

이미 언급했듯이 개요는 공간을 차지하지 않습니다. 테두리를 추가하면 문서에서 요소의 총 너비 / 높이가 증가하지만 윤곽선에서는 발생하지 않습니다. 또한 테두리와 같은 특정면에 윤곽선을 설정할 수 없습니다. 전부 아니면 아무것도 아니야

tldr;

W3C는 다음과 같은 차이점이 있다고 설명합니다.

• 윤곽선은 공간을 차지하지 않습니다.
• 윤곽선은 직사각형이 아닐 수 있습니다.

출처

접근성을 위해 개요를 사용해야합니다

개요의 주요 목적은 접근성입니다. 개요로 설정 : 피해야 할 것은 없습니다.

제거해야하는 경우 대체 스타일을 제공하는 것이 좋습니다.

outline : none 또는 outline : 0을 사용하여 초점 표시기를 제거하는 방법에 대한 몇 가지 팁을 보았습니다. 윤곽선을 다른 요소로 바꾸지 않고 키보드 포커스가있는 요소를 쉽게 확인할 수있는 경우가 아니면이 작업을 수행하지 마십시오. 키보드 포커스의 시각적 표시기를 제거하면 키보드 탐색에 의존하는 사람들이 사이트를 탐색하고 사용하는 데 어려움을 겪을 수 있습니다.

출처 : "링크 및 양식 컨트롤에서 윤곽선을 제거하지 마십시오", 365 Berea Street

추가 자료

• http://outlinenone.com/

윤곽선을 실제로 사용하면 투명성이 처리됩니다. 배경이있는 부모 요소가 있지만 자식 요소의 테두리를 투명하게하여 부모의 배경이 보이게하려면 "테두리"대신 "개요"를 사용해야합니다. 테두리는 투명 할 수 있지만 부모의 배경이 아니라 자녀의 배경을 나타냅니다.

즉,이 설정은 다음과 같은 효과를 만들었습니다.

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

IE는 W3C 박스 모델을 구현하지 않기 때문에 W3C의 개요 는 IE의 경계 입니다.

w3c 상자 모델에서 테두리는 요소의 너비와 높이를 제외합니다. IE에서는 포괄적입니다.

둘 다의 차이점을보기 위해 CSS / html 코드를 조금 만들었습니다.

outline넘칠 가능성이있는 하위 요소, 특히 인라인 으로 묶는 것이 좋습니다. 컨테이너에 포함 .

border블록 동작 요소에 훨씬 더 적합합니다 .

당신을위한 바이올린!

CSS의 outline 속성은 요소 외부 주위에 선을 그립니다. 다음을 제외하고는 border와 비슷합니다.

• 항상 모든면을 돌아 다니며 특정 할 수 없습니다.
• 측면 상자 모델의 일부가 아니므로
  요소 또는 인접한 요소 의 위치에 영향을 미치지 않습니다.

출처 : https://css-tricks.com/almanac/properties/o/outline/

"개요"를 사용하는 실제적인 예로서, 웹 페이지에서 시스템 포커스를 따르는 희미한 점선 테두리 (예 : 링크를 통해 탭하는 경우)는 outline 속성을 사용하여 제어 할 수 있습니다 (적어도 Firefox에서는 가능함을 알고 있습니다) 다른 브라우저를 사용하지 마십시오).

일반적인 "이미지 교체"기술은 다음과 같은 방법을 사용합니다.

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

CSS에서 다음과 같이 :

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

문제는 초점이 태그에 도달하면 윤곽선이 왼쪽으로 1000em 떨어져 나가는 것입니다. 윤곽선을 사용하면 이러한 요소에서 초점 윤곽선을 끌 수 있습니다.

IE 개발자 툴바는 "선택"모드에서 검사 할 요소를 강조 표시 할 때 "후면"외곽선과 같은 것을 사용한다고 생각합니다. 그것은 "개요"가 공간을 차지하지 않는다는 사실을 잘 보여줍니다.

윤곽선은 프로젝터가 어떤 것의 바깥 쪽을 경계로 그리는 경계라고 생각하면 주위의 실제 물체입니다.
투영은 쉽게 겹칠 수 있지만 테두리는 통과시키지 못합니다.
때로는을 사용 grid+%width하면 테두리가보기 포트의 배율을 변경합니다. 예를 들어 width:100%부모가 있는 div width:100px는 부모를 완전히 채 웁니다. 그러나 border:solid 5pxdiv에 추가 하면 div를 더 작게 만들어 테두리를위한 공간을 만들 수 있습니다 (드물지만 해결 방법!)
이지만 개요가 있으면 개요가 더 가상 적이기 때문에이 문제가 없습니다 .D는 요소 외부의 선 일뿐이지만 간격을 올바르게 지정하지 않으면 다른 내용과 겹칠 수 있습니다.

짧게 만들기 :
개요 전문가 :
간격과 위치
단점으로 엉망이되지 않습니다 :
겹칠 가능성이 높습니다 .

테두리와 윤곽선의 차이점 :

테두리는 상자 모델의 일부이므로 요소의 크기에 포함됩니다. 외곽선은 상자 모델의 일부가 아니므로 주변 요소에 영향을 미치지 않습니다.

데모:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

W3Schools에서 복사 :

정의와 사용법

외곽선은 요소를 "눈에 띄게"만들기 위해 요소 주위 (경계선 외부)에 그려진 선입니다.