コーディングをしていると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;にしても同じでした。そのため、下記のように同じ色で設定し直しました。理由がわかれば、いつか追記したいと思います。