외곽선과 테두리의 차이점

외곽선과 테두리의 차이점

---

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를 제외한 모든 주요 브라우저 지원

---

Further to other answers, outlines are usually used for debugging. Opera has some nice user CSS styles that use the outline property to show you where all the elements are in a document.

If you're trying to find out why an element isn't appearing where you expected or at the size you expected, add a few outlines and see where the elements are.

As already mentioned, outlines do not take up space. When you add a border, the element's total width/height in the document increases, but that doesn't happen with outline. Also you can't set outlines on specific sides like borders; it's all or nothing.

---

tldr;

The W3C explains it as having the following differences:

• Outlines do not take up space.
• Outlines may be non-rectangular.

Source

Outline should be used for accessibility

It should also be noted that outline's primary purpose is accessibility. Setting it to outline: none should be avoided.

If you must remove it it maybe a better idea to provide alternative styling:

I’ve seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.

Source: "Do Not Remove the Outline from Link and Form Controls", 365 Berea Street

---

More Resources

• http://outlinenone.com/

---

A practical use of outline deals with transparency. If you have a parent element with a background, but want a child element's border to be transparent so that the parent's background will show through, you must use "outline" rather than "border." While a border can be transparent, it will show the child's background, not the parent's.

In other words, this setting created the following effect:

outline: 7px solid rgba(255, 255, 255, 0.2);

---

From W3 School Site

The CSS border properties allow you to specify the style and color of an element's border.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width.

If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

Check here for more information : http://webdesign.about.com/od/advancedcss/a/outline_style.htm

---

A little bit of an old question, but worth mentioning a Firefox rendering bug (still present as of Jan '13) where the outline will render on the outside of all child elements even if they overflow their parent (through negative margins, box-shadows, etc.)

You can fix this with:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Super unfortunate that it's still not fixed. I much prefer outlines in many cases since they do not add to the dimensions of an element, saving you from always having to consider border widths when setting dimensions of an element.

After all, which is simpler?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Or:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

---

It is also worth noting, that W3C's outline is IE's border, since IE does not implement W3C box model.

In w3c box model, the border is exclusive of element's width and height. In IE it is inclusive.

---

I've made a little piece of css/html code just to see the difference between both.

outline is better to inclose potential overflowing child elements, especially into an inline container.

border is much more adapted for block-behaving elements.

Fiddle for you sir!

---

The outline property in CSS draws a line around the outside of an element. It's similar to border except that:

• It always goes around all the sides, you can't specify particular
• sides It's not a part of the box model, so it won't effect the
  position of the element or adjacent elements

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

---

As a practical example of using "outline", the faint dotted border that follows the system focus on a webpage (eg. if you tab through the the links) can be controlled using the outline property (at least, I know it can in Firefox, not tried other browsers).

A common "image replacement" technique is to use, for example:

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

with the following in the CSS:

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

The problem being that when the focus reaches the tag, the outline heads off 1000em to the left. Outline can allow you to turn off the focus outline on such elements.

I believe that the IE Developer Toolbar is also using something like outline "under the hood" when highlighting elements for inspection in "select" mode. That shows well the fact that "outline" takes up no space.

---

think about outline as a border that a projector draw outside something as a border is an actual object around that thing.
a projection can easily overlap but border don't let you pass.
some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!)
but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element but the problem is if you don't do spacing properly it would overlap with other contents.

to make it short:
outline pros:
it doesn't mess with spacing and positions
cons:
high chance of overlapping

---

Copied from W3Schools:

Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

참고URL : https://stackoverflow.com/questions/1158515/difference-between-outline-and-border