Modelul cutiei în web design – Chenare

Model cutie

(Modelul cutiei CSS. Credit: Matthias Apsel/Wikimedia Commons, CC0. Traducere Nicolae Sfetcu)

Chenare

Pentru a identifica mai bine unde se află conținutul nostru pe o pagină și pentru a semnifica faptul că este diferit de materialul din jurul acestuia, putem ajusta chenarele elementelor noastre. Chenarele pot fi activate sau dezactivate de partea de sus, de jos, din stânga și din dreapta elementului și pot avea, de asemenea, diferite stiluri cum ar fi linii solide, duble, canelate, punctate și întrerupte, printre altele.

Pentru a specifica un chenar complet, folosim pur și simplu chenar și putem aplica culoare, lățime și stil:

<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:groove;
border-width:medium;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
}
</style>
<p class="one">Text.</p>
<p class="two">Mai mult text.</p>
<p class="three">Și mai mult text.</p>

Lista completă a stilurilor de chenar posibile este următoarea:

Valoare	Descriere
none	Fără chenar.
dotted	Chenar punctat.
dashed	Chenar întrerupt.
solid	Chenar solid.
double	Chenar dublu (două linii).
groove	Chenar 3d canelat.
ridge	Chenar 3d crestat.
inset	Chenar 3d coborât (cufundat).
outset	Chenar 3d ridicat.
inherit	Moștenește același stil ca și elementul părinte.

Tabelul 4 Stiluri de chenar

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu