Bordurile și contururile CSS sunt instrumente valoroase pentru designerii web care doresc să adauge fler unui site. Sunt ușor de utilizat odată ce știți cum funcționează și sunt suficient de versatile pentru a răspunde unei game largi de nevoi. Să ne uităm la marginile CSS pentru a vedea de unde ar trebui să începeți.

Care este diferența dintre o chenar și un contur în CSS?

Contururile și marginile CSS formează două dintre straturile exterioare ale modelul casetei CSS, așezat între margini și margini. Deși aceste proprietăți sunt similare, ele au valori și scopuri diferite.

În primul rând, contururile CSS se află în afara granițelor. Aceasta înseamnă că se pot suprapune cu conținutul din afara elementului la care le aplicați. Împreună cu aceasta, marginile CSS modifică dimensiunile unui element, dar contururile nu.

Dacă întâmpinați dificultăți în vizualizarea stilurilor de chenar și contur, puteți utiliza instrumentele de dezvoltare ale browserului pentru depanare lor.

CSS Border & Outline Shared Property Values

instagram viewer

În ciuda diferențelor lor, marginile și contururile CSS împărtășesc unele dintre valorile lor. Stenografia pe care o utilizați pentru fiecare este, de asemenea, foarte asemănătoare.

Stenografie CSS Border & Outline

La fel ca și alte proprietăți CSS complexe, atât marginile, cât și contururile au la dispoziție prescurtare. Ambele proprietăți au același format pentru opțiunile lor scurte și arată astfel.

frontieră: lăţimestilculoare;
contur: lăţimestilculoare;

Acest lucru creează reguli care arată astfel atunci când sunt în acțiune. Desigur, totuși, această prescurtare nu acoperă toate valorile disponibile pentru aceste proprietăți.

chenar: 10px albastru solid;
contur: 20px roșu continuu;

Aceste reguli scurte de margine și contur CSS au ca rezultat un chenar albastru subțire cu un contur roșu gros.

Ca și alte proprietăți CSS prescurtate, puteți folosi proprietăți individuale pentru a obține aceleași rezultate.

Lățimea marginii CSS și lățimea conturului

Lățimile marginilor și ale contururilor sunt valori opționale ale proprietăților CSS care stabilesc grosimea chenarelor și a contururilor pe care le utilizați. Formatul acestor proprietăți este același.

lățime contur: 20px;
lățime chenar: 10px;

Marginile permit setarea lățimilor individuale pentru fiecare parte a elementului, dar contururile nu. Puteți citi mai multe despre acest lucru în secțiunile următoare.

Stil de chenar CSS și stil de contur

Bordurile și contururile CSS vin într-o varietate de stiluri. Chenarele solide sunt cele mai comune, dar poți fi creativ cu felul în care folosești chenarele și contururile.

chenar-stil: solid;
stil de contur: punctat;

Puteți găsi o listă completă a diferitelor stiluri de margine și contur CSS la sfârșitul acestui articol.

CSS chenar-culoare și contur-culoare

Ca și în cazul altor proprietăți CSS bazate pe culori, chenarele și contururile acceptă toate culorile legale CSS. Acestea includ coduri hexadecimale, coduri RGB, culori scurte și multe altele.

culoare-chenar: albastru;
culoare-contur: #ff0000;

De asemenea, puteți utiliza degrade de culoare atunci când lucrați cu margini și contururi CSS.

Valorile proprietăților CSS Border

Pe lângă valorile proprietăților lor comune, granițele și contururile au și valori unice de explorat. Granițele CSS au două proprietăți unice care merită învățate.

CSS chenar-rază

Adăugarea unei raze la marginea unui element vă oferă mult control asupra formei acestuia. Fiecare colț al unui element poate avea o rază diferită, iar această proprietate poate fi setată chiar și atunci când stilul de chenar este setat la niciunul.

chenar-rază: 20px;

Puteți seta o singură valoare pentru a modifica raza tuturor colțurilor.

De asemenea, puteți împărți colțurile în grupuri de sus stânga/jos dreapta și sus dreapta/jos stânga.

chenar-rază: 10px 20px;

Acest lucru facilitează crearea de forme interesante cu elementele HTML.

În cele din urmă, puteți seta fiecare colț să aibă propria sa rază.

chenar-rază: 10px 20px 30px 40px;

Aceste valori se aplică în sensul acelor de ceasornic începând din colțul din stânga sus.

Proprietăți CSS Border Side

Spre deosebire de contururi, puteți seta fiecare parte a unui chenar pentru a avea o valoare unică pentru multe dintre proprietățile sale. Acest lucru face posibil să acordați fiecărei părți a elementului o lățime diferită.

chenar-stânga-lățime: 10px;
chenar-dreapta-lățime: 20px;
chenar-sus-lățime: 30px;
chenar-jos-lățime: 40px;

De asemenea, puteți seta stiluri independente de chenar CSS pentru fiecare parte a unui element.

border-left-style: solid;
border-right-style: punctat;
border-top-style: punctat;
stil de margine de jos: dubla;

Și puteți schimba culoarea fiecărei părți dacă doriți.

border-left-style: albastru;
border-dreap-style: #ff0000;
border-top-style: #00ff00;
border-bottom-style: rgb (0, 0, 255);

Laturile de margine CSS funcționează cu prescurtarea obișnuită pentru a combina astfel.

chenar-stânga: 10px albastru solid;
granita-dreapta: 20px punctat #00ff00;
chenar-sus: 30px întreruptă #ff0000;
margine de jos: 40px dublargb(0, 0, 255);

Valorile proprietăților de contur CSS

La fel ca marginile CSS, contururile au o proprietate unică proprie; contur-offset.

CSS outline-offset

Adăugarea unui offset la un contur creează un spațiu între el și elementul principal. Această compensare trebuie să fie aceeași pentru fiecare parte a conturului, iar proprietatea acceptă o singură valoare.

contur-offset: 10px;

Aceasta poate fi o modalitate elegantă de a utiliza un al treilea chenar pentru elementele dvs. care se potrivește cu culoarea de fundal.

Stiluri de chenar și contur CSS

Atât marginile, cât și contururile au nevoie de un stil pentru a funcționa. Există zece stiluri disponibile din care să alegeți, inclusiv chenare care nu apar deloc.

chenar-stil: solid;
stil de chenar: punctat;
chenar-stil: punctate;
chenar-stil: canelura;
chenar-stil: creasta;
stil de chenar: dubla;
chenar-stil: insert;
chenar-stil: început;
border-style: ascuns;
chenar-stil: niciunul;

Bordurile au aceleași stiluri cu contururile, numai cu stilul de contur setat ca proprietate.

Cum să utilizați chenarele și contururile CSS

Contururile și chenarele sunt instrumente excelente de design pentru creatorii de site-uri web. Puteți defini aspectul site-ului dvs. cu aceste proprietăți CSS, dar va trebui să fiți creativ.