CSS Doboz modell - körvonal (outline)

A mai napon megismerkedünk a körvonallal részletesen. Erről még nem beszéltünk, de a W3-as tananyag szerint meg kell említeni.

A körvonalról annyit kell tudnunk, hogy egy vonal a keret körül, mellyel kiemelhetjük az adott elemet. Azonban nem egyezik meg a border-rel, hiszen nem tartozik az elem méreteihez.

A körvonalnak is adhatunk tulajdonságokat. Nézzük meg ezeket:

STYLE

A style tulajdonság megadja a körvonal stílusát.

elem{
outline-style:dotted;
}


Értékeit itt megnézhetitek.

WIDTH

A width tulajdonság megadja a körvonal szélességét.

elem{
outline-width:20px;
}


Értékei itt.

COLOR

a color tulajdonság megadja a körvonal színét.

elem{
outline-color:green;
}


Értékei.


RÖVIDÍTÉS:

A már megtanult módon. Először a színét adjuk meg, majd a stílusát, végül a szélességét.

elem{
outline: green dotted 20px;
}


Biztos feltűnt, hogy a leckék egyre rövidebbek. Ennek az az oka, hogy a CSS és a HTML szintaktikáját már tudjuk, s már csak a különböző tulajdonságokat és értékeket kell megtanulnunk. A következő leckében megnézzük az eltartást s befejezzük a doboz modellt.