CSS Outline (Contur)
Un contur (outline) este o linie desenată în jurul unui element, în afara marginii sale (border), pentru a scoate elementul în evidență.
CSS are aceste proprietăți pentru contur:
outline-style— stabilește stilul conturului.outline-color— stabilește culoarea conturului.outline-width— stabilește lățimea conturului.outline-offset— adaugă spațiu între contur și marginea sau chenarul elementului.outline— o proprietate prescurtată pentru celelalte.
Notă: Un contur diferă de un chenar (border). Conturul este desenat în afara chenarului elementului și se poate suprapune peste alt conținut. De asemenea, conturul nu face parte din dimensiunea elementului, deci lățimea și înălțimea totală a elementului nu sunt afectate de contur.
Proprietatea outline-style
Proprietatea outline-style stabilește stilul conturului. Poate lua una din aceste valori: dotted, dashed, solid, double, groove, ridge, inset, outset, none sau hidden.
Exemplu
Fiecare paragraf arată un stil de contur diferit.
Prompt
O pagină HTML care demonstrează diferitele valori outline-style.
Într-un bloc
<style> intern, creează clase de paragraf pentru fiecare stil de contur: dotted, dashed, solid, double, groove, ridge, inset, outset, none și hidden. Adaugă paragrafelor un padding pentru ca marginile să fie vizibile. Adaugă un paragraf etichetat pentru fiecare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
padding: 5px;
outline-color: green;
}
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;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}
</style>
</head>
<body>
<p class="dotted">A dotted outline.</p>
<p class="dashed">A dashed outline.</p>
<p class="solid">A solid outline.</p>
<p class="double">A double outline.</p>
<p class="groove">A groove outline.</p>
<p class="ridge">A ridge outline.</p>
<p class="inset">An inset outline.</p>
<p class="outset">An outset outline.</p>
<p class="none">No outline.</p>
<p class="hidden">A hidden outline.</p>
</body>
</html>
Toate proprietățile CSS Outline
Un rezumat al proprietăților pentru contur:
outline— stabilește toate proprietățile conturului într-o singură declarație.outline-color— stabilește culoarea unui contur.outline-offset— stabilește spațiul dintre un contur și marginea sau chenarul unui element.outline-style— stabilește stilul unui contur.outline-width— stabilește lățimea unui contur.