kursy, tutoriale
by: Aurelia SypniewskaPosted on:

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

Czas czytania: < 1 minut

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

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.

outline

border

Obiekt

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:

dotted outline

dashed outline

solid outline

double outline

groove outline

ridge outline

inset outline

outset outline

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