コーディングをしているとborderのプロパティはよく使います。似ているのですが、outlineというプロパティがあります。outlineも要素の周囲に描画するために使いますが、何が違うのでしょうか？
outlineは要素のレイアウトやサイズに影響を与えません。outlineが要素の外側に追加されても、要素の全体的なサイズは変わりません。outlineは一方向です。borderのように個々の辺を個別にスタイル設定することはできません。- borderのように
border-radiusを使って角を丸めることができません。
outlineプロパティは、borderのように以下の3つの値をスペースで区切って指定します
.class {
outline: 1px solid red;
}
この例では要素の周囲に太さ1px、スタイルがsolid、色が赤のアウトラインが描画されます。
また、ブラウザはフォーカスが当たった時に自動でinput要素などにoutlineを適用します。そのため、お問い合わせフォームなどでinput要素を使用している時にフォーカス時にデフォルトの色がついてしまっているため、下記のように変更するケースが多いです。
input:focus{
border:0;
outline: 1px $color-accent solid;
}
上記のborderを消さないと、二重になってまいます。ただ、上記でborderは消えませんでした。border: none;にしても同じでした。そのため、下記のように同じ色で設定し直しました。理由がわかれば、いつか追記したいと思います。
