アウトラインとボーダーの違い

CSSの 'border'プロパティと 'outline'プロパティの違いを知っている人はいますか？違いがない場合、同じものに2つのプロパティがあるのはなぜですか？

送信元：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>

FIDDLE

（注：firefoxには、-moz-outline-radiusアウトラインの角を丸めることができるプロパティがあります...このプロパティは、どのCSS標準でも定義されておらず、他のブラウザー（ソース）ではサポートされていません）

2）片側のみのスタイル

borderには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>

FIDDLE

注：outline-offsetInternet Explorerを除くすべての主要なブラウザーがサポートされます

他の回答に加えて、アウトラインは通常デバッグに使用されます。Operaには、outlineプロパティを使用してドキュメント内のすべての要素がどこにあるかを示す、優れたユーザーCSSスタイルがいくつかあります。

要素が期待した場所または期待したサイズで表示されない理由を見つけようとしている場合は、いくつかのアウトラインを追加して、要素がどこにあるかを確認してください。

すでに述べたように、アウトラインはスペースを取りません。ボーダーを追加すると、ドキュメント内の要素の合計幅/高さが増加しますが、アウトラインでは発生しません。また、境界線のような特定の側面に輪郭を設定することはできません。それは全部か無かです。

tldr;

W3Cは、次のような違いがあると説明しています。

• 輪郭はスペースを取らない。
• アウトラインは長方形ではない場合があります。

ソース

アクセシビリティにはアウトラインを使用する必要があります

また、アウトラインの主な目的はアクセシビリティであることにも注意してください。アウトラインに設定：避けるべきものはありません。

削除する必要がある場合は、代替のスタイルを提供することをお勧めします。

アウトラインインジケーターを使用しないでフォーカスインジケーターを削除する方法に関するヒントをいくつか見ました。どの要素にキーボードフォーカスがあるかを簡単に確認できるように、アウトラインを他の何かで置き換えない限り、これを行わないでください。キーボードフォーカスの視覚的インジケーターを削除すると、キーボードナビゲーションに依存しているユーザーは、サイトのナビゲートと使用が非常に困難になります。

出典：「リンクとフォームのコントロールからアウトラインを削除しないでください」、365 Berea Street

その他のリソース

• http://outlinenone.com/

アウトラインの実用的な使い方は透明度を扱います。背景を持つ親要素があるが、子要素の境界線を透明にして親の背景が透けて見えるようにする場合は、「ボーダー」ではなく「アウトライン」を使用する必要があります。境界線は透明にすることができますが、親の背景ではなく、子供の背景が表示されます。

つまり、この設定により次の効果が生まれました。

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

W3学校サイトから

CSSボーダープロパティは、要素の境界線のスタイルと色を指定することができます。

アウトラインは要素「目立つ」を作るために（国外）の要素を周りに描かれているラインです。

アウトラインの簡略プロパティは、1つの宣言ですべてのアウトラインプロパティを設定します。

設定できるプロパティは、（順番に）：輪郭色、輪郭スタイル、輪郭幅です。

上記の値のいずれかが欠落している場合（「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プロパティは、要素の外側に線を引きます。ボーダーと似ていますが、次の点が異なります。

• それは常にすべての側面を回ります、特定を指定することはできません
• 側面これはボックスモデルの一部ではないため
  、要素または隣接する要素の位置には影響しません

出典：https : //css-tricks.com/almanac/properties/o/outline/

「アウトライン」を使用する実際的な例として、Webページのシステムフォーカスに続くかすかな点線のボーダー（リンクをタブで移動する場合など）は、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からコピー：

定義と使用法

アウトラインは、要素の周囲（境界線の外側）に描画される線で、要素を「目立たせる」ためのものです。