22.2. fejezet: CSS alapismeretek – Körvonalak (outline)

Ez a tulajdonság beállítja a CSS körvonalak stílusát, színét és vastagságát. Az egyértelmű megfogalmazásért íme egy ábra:

outline-style: A keret típusai megegyeznek a vonalnál már megismertekkel:
-    dotted – pontozott.
-    dashed – vonalas.
-    solid – sima egyenes.
-    double – dupla.
-    groove – 3D-s keret. Az effektus függ a keret színétől.
-    ridge - 3D-s (gerincvonal) körvonal. Az effektus függ a körvonal színétől.
-    inset - 3D-s (belső megadású) körvonal. Az effektus függ a körvonal színétől.
-    outset - 3D-s (külső megadású) körvonal. Az effektus függ a körvonal színétől.
-    none – nincs körvonal.
-    hidden – rejtett körvonal.

Példa:

p {
    border: 1px solid black;
    outline-color: red;
}

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

Ennek gyakorlati megvalósítása látható itt: htmlpelda34.html.

outline-color: A körvonal színe – a már megszokott lehetőségekkel.
-    egyszerűen név, pl.: „red”.
-    RGB-kód, pl.: rgb(255,0,0).
-    hexadecimális érték, pl.: „#ff0000”.
-    invert – ez új! Ez a gyakorlatban a szín inverzióját jelenti, tehát a körvonal ellentéte lesz a háttér színének.

Példa:

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

outline-width: körvonal vastagsága - a már megszokott lehetőségekkel. A vastagság megadható a szokott mértékegységekkel (px, pt, cm, em, stb.) vagy lehet a három megadott értéket is használni: thin (vékony), medium (közepes) vagy thick (vastag).
Példa:

p {border: 1px solid black;}
p.egy {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}
p.ketto {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

outline-offset: hely a körvonal és az elem sarka vagy határa között. Példa:

div {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
}

outline: körvonal gyors megadása. A fenti lehetőségek együttese. Sorrend: width style color. E három tulajdonságból a style (típus) kötelező. Példa:

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

Ugyanez másképpen:

p {
border-width: 1px;
border-style: solid;
border-color: black;
outline-width: 5px;
outline-style: dotted;
outline-color: red;
}

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_outline.asp