Kontur CSS

Ten element ma czarną krawędź i niebieski kontur, szerokość 10px.

Kontur CSS

Kontur to linia rysowana wokół elementu, poza krawędzią, aby wyróżnić element.

CSS ma następujące atrybuty konturu:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Uwaga:Kontur zKrawędźRóżne! Różnica polega na tym, że kontur jest rysowany poza krawędzią elementu i może nachodzić na inne treści. Podobnie, kontur nie jest częścią wymiarów elementu; całkowita szerokość i wysokość elementu nie są wpływowane przez szerokość linii konturu.

Styl konturu CSS

Atrybut outline-style określa styl konturu i może mieć następujące wartości:

  • punktowaty - Definiowanie konturu punktowatego.
  • przerywany - Definiowanie konturu przerywanego.
  • pełny - Definiowanie konturu pełnego.
  • podwójny - Definiowanie konturu podwójnego.
  • wklęsły rowek - Definiowanie konturu wklęsłego rowku 3D.
  • wypukły rowek - Definiowanie konturu wypukłego rowku 3D.
  • wklęsły - Definiowanie konturu wklęsłego 3D.
  • wypukły - Definiowanie konturu wypukłego 3D.
  • brak - Definiowanie braku konturu.
  • ukryty - Definiowanie ukrytego konturu.

Poniższy przykład pokazuje różne wartości outline-style:

Przykład

Pokazanie różnych stylów konturu:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Wynik:

Kontur kropkowy.

Kontur przerywany.

Kontur gruby.

Kontur dwuliniowy.

Kontur wklęsły 3D. Efekt zależy od wartości outline-color.

Kontur wypukły 3D. Efekt zależy od wartości outline-color.

Kontur wklęsły 3D. Efekt zależy od wartości outline-color.

Kontur wypukły 3D. Efekt zależy od wartości outline-color.

Spróbuj sam

Uwaga:Jeśli nie ustawiono outline-style Atrybuty, w przeciwnym razie inne atrybuty konturu (będą szczegółowo omówione w następnym rozdziale) nie będą miały żadnego wpływu!