Zastosowanie właściwości outline [CSS]

Właściwość outline w zastosowaniu jest bardzo podobna do „border”(obramowanie) – podobnie jak ona stanowi formę obramowania (konturu) obiektu.

Jak działa właściwość outline (CSS)?

Wykorzystuje się ją do dodatkowego uwidocznienia elementu (podwójne obramowanie). To właśnie outline jest odpowiedzialna za niebieskie obramowanie wokół klikniętych linków (<a>) na stronie internetowej.

Właściwość jest obsługiwana przez większość przeglądarek (więc ramka powinna być wszędzie widoczna) może również być użyta przy różnych animacjach.

Przykład zastosowania:

Przykładowy tekst

p {
    border: 1px solid blue;
    outline: red dotted thick;
}

W powyższym przykładzie outline przybrało postać czerwonych kropek otaczających obrabowanie obiektu w tym wypadku akapitu.

Specyfikacje:

• outline-color kolor konturu
• outline-style rodzaj konturu
• outline-width szerokość konturu
• initial ustawienia domyślne
• inherit Inherits dziedziczy ustawienia z poprzedniego

Typy dopuszczalnych obramowań:

Obramowania są analogiczne jak przy właściwości CSS border

• dotted – kropkowany kontur
• dashed – przerywana linia
• solid – Defines a solid outline
• double – nieprzerwana linia
• groove – trójkątny kontur. Efekt zależy od wartości konturu-koloru
• ridge – obrys 3D. Efekt zależy od wartości konturu-koloru
• inset – obrys 3D. Efekt zależy od wartości konturu-koloru
• outset – obrys 3D. Efekt zależy od wartości konturu-koloru
• none – brak obrysu
• hidden – ukryty obrys

Przykłady zastosowania:

Kod przykładu:
CSS

.exempl2 p {
    border: 1px solid black;
    outline-color:red;
}
.exempl2 p.dotted {outline-style: dotted;}
.exempl2 p.dashed {outline-style: dashed;}
.exempl2 p.solid {outline-style: solid;}
.exempl2 p.double {outline-style: double;}
.exempl2 p.groove {outline-style: groove;}
.exempl2 p.ridge {outline-style: ridge;}
.exempl2 p.inset {outline-style: inset;}
.exempl2 p.outset {outline-style: outset;}

HTML

<div class="exempl2">
<p class="dotted">dotted outline</p>
<p class="dashed">dashed outline</p>
<p class="solid">solid outline</p>
<p class="double">double outline</p>
<p class="groove">groove outline</p>
<p class="ridge">ridge outline</p>
<p class="inset">inset outline</p>
<p class="outset">outset outline</p>
</div>

Źródła:
https://www.w3schools.com/css/css_outline.asp
https://www.w3schools.com/cssref/pr_outline-color.asp