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

Czas czytania: < 1 minut

Właściwość CSS outline swoim działaniem przypomina właściwość border (czyli obramowanie). Obie właściwości tworzą więc wokół obiektu swojego rodzaju kontur. Co jednak istotne outline otacza nawet obramowanie, które tworzy border.

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;}

Kod 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