Pentru a controla marginea unui element, utilizați proprietatea generică de margine. Această proprietate vă permite să setați grosimea, stilul și culoarea chenarului unui element într-o singură declarație.

Aceste trei proprietăți (grosimea chenarului, stilul chenarului și culoarea) pot fi setate într-o singură declarație. Iată un exemplu:

Puteți specifica un stil de chenar doar pe o parte a unui element. Pentru a face acest lucru, utilizați proprietățile border-top (bord superior), border-right (chenar dreapta), border-bottom (chenar jos), border-left (chenar stânga).

În acest exemplu, fiecare parte a blocului are o grosime, un stil și o culoare diferite a marginii.

Gândiți-vă cum ați putea crea o formă ca aceasta folosind CSS:

Valorile marginilor - grosime, stil și culoare - pot fi setate separat folosind proprietăți speciale.

• border-style - stil de chenar.
• border-width - lățimea chenarului.
• border-color - culoarea chenarului.

Să luăm în considerare fiecare dintre valori separat.

proprietate tip graniță Stil de chenar.

Proprietatea border-style stabilește stilul chenarului. În CSS, în Diferențele HTML, marginea unui element poate fi nu numai solidă. Următoarele valori sunt permise pentru stilul de chenar:

1. none - fără margine (implicit).
2. solid - chenar solid.
3. dublu - chenar dublu.
4. punctat - chenar punctat.
5. punctat - un chenar format dintr-o serie de puncte.
6. creasta - chenar „creastă”.
7. groove - margine „groove”.
8. inset - margine deprimată.
9. start - chenar extrudat.

Exemple de cum arată.

fara frontiera (niciuna)

margine solidă

chenar dublu

marginea unei serii de puncte (punctate)

margine întreruptă

marginea canelurii

marginea crestei

chenar indentat (inserat)

chenar extrudat (la început)

Apropo, dacă setați culoarea marginii la negru pentru cadrul de creastă, veți obține acest rezultat.

Un bloc div cu margine neagră și stil de creastă.

Cadrul pare solid, dar asta se datorează faptului că stilul de creastă este creat prin adăugarea unui efect de umbră neagră, iar efectul negru nu este vizibil pe un cadru negru.

Folosind proprietatea border-style, stilul chenar poate fi setat nu numai pentru toate laturile blocului. Este posibil să setați mai multe valori pentru o proprietate de tip chenar, în funcție de numărul de valori, stilul de chenar va fi atribuit unui număr diferit de laturi ale blocului. Puteți seta una, două, trei sau patru valori. Să ne uităm la exemple pentru fiecare caz.

O singură valoare (solid) - stilul de chenar este setat pentru toate laturile blocului.

Două valori (dublu solid) - prima valoare setează stilul pentru părțile de sus și de jos, a doua pentru partea laterală.

Trei valori (solid dublu punctat) - prima valoare pentru partea de sus, a doua pentru laturi, a treia pentru partea de jos.

Patru valori (liniate dublu punctată) - fiecare valoare pentru o parte în sensul acelor de ceasornic începând de sus.

Proprietatea border-width. Grosimea chenarului.

Pentru a seta lățimea chenarului unui element, utilizați proprietatea border-width. Grosimea chenarului poate fi setată în orice unități absolute măsurători, de exemplu în pixeli.

Asemenea proprietății în stil de chenar, proprietatea poate fi setată la una până la patru valori. Să ne uităm la exemple pentru fiecare caz.

Exemplu de cod:

De asemenea, pentru proprietatea border-width există valori în formular Cuvinte cheie. Sunt trei în total:

• subțire - marginea subțire;
• medie - grosime medie;
• gros - chenar gros;

Grosimea chenarului: subțire.

Grosimea chenarului: medie.

Grosimea chenarului: gros.

Proprietatea chenar-culoare. Culoarea chenarului.

Pentru a controla culoarea chenarului, utilizați instrumentul pentru culoarea chenarului. Culorile pentru această proprietate pot fi setate folosind orice metodă descrisă în articolul „Culori în CSS”, și anume:

• Notația hexazecimală (#ff00aa) a culorii.
• format RGB- rgb(255,12,110) . format RGBA pentru CSS3.
• formatele HSLși HSLA pentru CSS3.
• Numele culorii, de exemplu negru. Lista plina Numele de culori sunt date în tabelul de nume de culori CSS.

Proprietatea culoare-chenar poate avea, de asemenea, una până la patru valori și le tratează în mod similar cu proprietățile anterioare.

O valoare (roșu).

Două valori (roșu negru).

Trei valori (roșu negru galben).

Patru valori (roșu negru galben albastru).

Acum să revenim la problema de mai sus și să desenăm o figură:

Iată codul care desenează o astfel de cifră, doar mai mare ca dimensiune:

Setarea valorilor pentru laturi separat

S-a menționat mai sus că puteți specifica valorile proprietăților de frontieră pentru o singură parte a unui bloc. Există proprietăți în aceste scopuri:

• border-top (chenar de sus)
• granita-dreapta
• chenar-de jos
• border-left (chenar din stânga)

Permiteți-mi să vă reamintesc că pentru toate proprietățile sunt specificate trei valori (grosime, stil și culoare) în orice ordine. Dar există proprietăți care vă permit să setați separat grosimea, culoarea și stilul pentru fiecare parte. Scrierea acestor proprietăți este derivată din cele de mai sus.

Opțiuni de chenar superior (border-top).

• border-top-color - setează culoarea chenarului superior al elementului.
• border-top-width - setează grosimea marginii superioare a elementului.
• border-top-style - setează stilul chenarului superior al elementului.

Opțiuni pentru marginea dreaptă (chenar-dreapta).

• border-right-color - setează culoarea marginii din dreapta a elementului.
• border-right-width - setează grosimea marginii drepte a elementului.
• border-right-style - setează stilul chenarului drept al elementului.

Opțiuni pentru marginea de jos (border-bottom).

• border-bottom-color - setează culoarea marginii de jos a elementului.
• border-bottom-width - setează grosimea marginii de jos a elementului.
• border-bottom-style - setează stilul marginii de jos a elementului.

Opțiuni pentru marginea stângă (border-left).

• border-left-color - setează culoarea marginii din stânga a elementului.
• border-left-width - setează grosimea marginii din stânga a elementului.
• border-left-style - setează stilul marginii din stânga a elementului.

Un exemplu de utilizare a acestor proprietăți:

Proprietatea frontier-raza. Colțurile de margine rotunjite.

Proprietatea border-radius este destinată rotunjirii colțurilor marginilor unui element. Această proprietate a apărut în CSS3 și funcționează corect în toate browsere moderne, cu exceptia Internet Explorer 8 (și versiuni mai vechi).

Valorile pot fi orice numere utilizate în CSS.

Proprietatea chenar-rază: 15px.

Dacă cadrul blocului nu este specificat, atunci fileul are loc cu fundalul. Iată un exemplu de bloc rotunjit fără chenar, dar cu o culoare de fundal:

Proprietatea chenar-rază: 15px.

Există proprietăți pentru rotunjirea fiecărui colț individual al unui element. Acest exemplu le folosește pe toate:

Chenar-sus-stânga-rază: 15px; raza-chenar-sus-dreapta: 0; raza-chenar-jos-dreapta: 15px; raza-chenar-jos-stânga: 0;

Proprietatea chenar-rază: 15px.

Deși acest cod poate fi scris într-o singură declarație: border-radius : 15px 0 15px 0 . Faptul este că proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos prezintă regulile care guvernează astfel de anunțuri.

După ce ați studiat cu atenție acest tabel, puteți înțelege că cea mai scurtă intrare stilul dorit va fi astfel: border-radius : 15px 0 . Există doar două sensuri.

Puțină practică

Desenați o lămâie folosind CSS.

Iată codul pentru un astfel de bloc:

Marja: 0 auto; /* Centrați blocul */ lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px;

Am desenat deja figura:

Acum să lăsăm un triunghi din el:

Codul triunghiului este:

Marja: 0 auto; /* Plasează blocul în centru */ padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea-chenar-jos: roșu;

Proprietatea chenar generică vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element. Valorile pot fi în orice ordine, separate printr-un spațiu, browserul însuși va determina care dintre ele corespunde proprietății dorite. Pentru a seta un chenar numai pe anumite laturi ale unui element, utilizați proprietățile border-top , border-bottom , border-left , border-right.

informatie scurta

Denumiri

Valori

Valoarea lățimii chenarului determină grosimea chenarului. Sunt furnizate mai multe valori de tip chenar pentru a-i controla aspectul. Numele lor și rezultatul acțiunii sunt prezentate în Fig. 1.

Fig.1. Stiluri de cadru

border-color setează culoarea chenarului, valoarea poate fi în orice format permis de CSS.

Exemplu

Acest exemplu adaugă un chenar dublu în jurul blocului. Rezultatul este prezentat în Fig. 2.

Orez. 2. Aplicarea proprietăţii de frontieră

Model de obiect

Un obiect.stil.chenar

Notă

Browserul Internet Explorer până la versiunea 6 inclusiv afișează punctat ca punct cu o grosime a marginii de 1 px. Cu o grosime de 2 px și mai mare, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile blocului are o grosime de 2px sau mai mare, atunci în IE7 valoarea punctată se transformă în punctată .

Stilul de chenar în browsere diferite poate varia ușor atunci când se utilizează valori de canelură , creastă , de inserare sau de început.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru implementarea standardului.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

chenar CSS Un element este una sau mai multe linii care înconjoară conținutul elementului și umplutura acestuia. Chenarul este specificat utilizând proprietatea shorthand border. Stilul cadrului este setat folosind trei proprietăți: stil, culoareȘi lăţime.

Decorarea cadrelor și chenarelor elementelor HTML folosind proprietăți CSS

1. Stil de chenar

În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului elementului, cu fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrul determină afișarea acestuia fără această proprietate, cadrele nu vor fi deloc vizibile. Pentru un element, puteți seta un chenar pentru toate părțile simultan folosind proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare stil bordur, etc. Nu moștenit.

Sintaxă

P (stil chenar: solid;) p (stil chenar: solid;)

2. Culoarea cadrului chenar-culoare

Proprietatea stabilește culoarea cadrelor pe toate părțile în același timp. Folosind proprietățile de clarificare, puteți seta o culoare diferită pentru marginea fiecărei părți a elementului. Dacă nu este specificată nicio culoare pentru cadru, aceasta va fi aceeași cu culoarea textului elementului. Dacă elementul nu are text, culoarea chenarului va fi aceeași cu culoarea textului elementului părinte. Nu moștenit.

Sintaxă

P (culoare-chenar: #cacd58;)

3. Lățimea chenarului

Lățimea cadrului este specificată folosind unități de lungime sau cuvinte cheie. Dacă proprietatea de tip border este setată la nu valoreaza niciuna, iar o anumită lățime este setată pentru cadrul elementului, apoi în în acest caz, Lățimea cadrului este setată la zero. Nu moștenit.

Sintaxă

P (lățimea chenarului: 2px;)

4. Setarea unui cadru cu o singură proprietate

Proprietatea border vă permite să combinați următoarele proprietăți: border-width , border-style , border-color , de exemplu:

Div ( lățime: 100 px; înălțime: 100 px; chenar: 2 px gri solid; )

În acest caz, proprietățile specificate vor fi aplicate la toate marginile elementului simultan. Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

5. Setarea unui cadru pentru un chenar al unui element

În cazurile în care trebuie să specificați un stil diferit de chenar pentru un element, puteți utiliza notația scurtă pentru chenarul corespunzător.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista de proprietăți este specificată într-o ordine dată, în timp ce una sau două valori pot fi sărite, caz în care valorile lor vor prelua valorile implicite.

Stilul chenarului de sus este setat folosind proprietatea border-top, bottom-border-bottom, stânga-border-left și dreapta-border-right.

Sintaxă

P (chenar-sus: 2px gri solid;)

6. Contur exterior

Proprietatea specifică o margine exterioară în jurul elementelor (adică în afara graniței normale). Scopul principal al acestei proprietăți este de a evidenția un element. Spre deosebire de proprietatea border, aplicarea acestei proprietăți nu afectează dimensiunea sau poziția elementului, deoarece conturul este afișat deasupra blocului de elemente, ceea ce, la rândul său, poate duce la suprapunere marginile element și zonele învecinate.

De asemenea, conturul exterior, spre deosebire de cadrul elementului, înconjoară elementul pe toate părțile, încadrându-l în întregime.

Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea blocului pentru care este specificată raza de margine.

Proprietatea outline vă permite să combinați următoarele proprietăți: outline-color , outline-style , outline-width . Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

Div ( lățime: 100px; înălțime: 100px; contur: #cacd58 solid 2px; )

6.1. stil de contur

Aspectul liniei de contur externe este setat în mod similar cu stilul cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: creasta;)

6.2. Culoarea conturului exterior culoarea conturului

Culoarea conturului exterior poate fi specificată numai când valoarea stabilită stil de contur. Nu moștenit.

Sintaxă

P (stil contur: creasta; culoarea contur: argintiu; )

6.3. Grosimea conturului exterior lățimea conturului

Grosimea liniei de contur exterioare este setată în mod similar cu grosimea cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: punctat; lățime contur: 5px; )

Vlad Merjevici

CU folosind CSS Puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, proprietatea de frontieră este utilizată, ca cea mai universală, precum și contur și, în mod surprinzător, box-shadow , a cărei sarcină principală este de a crea o umbră. În continuare, vom lua în considerare aceste metode și diferențele dintre ele.

proprietatea conturului

Cea mai simplă proprietate pentru crearea cadrelor. Are aceiași parametri ca și border , dar diferă semnificativ în unele detalii:

• conturul este afișat în jurul elementului (chenar în interior);
• conturul nu afectează dimensiunile elementului (chenarul este adăugat la lățimea și înălțimea elementului);
• conturul poate fi setat numai în jurul întregului element, dar nu și pe partide individuale(chenarul poate fi folosit pentru orice parte sau pentru toate deodată);
• conturul nu este afectat de raza de filet specificată de proprietatea border-radius (chenarul este afectat).

Se pune întrebarea - în ce cazuri este nevoie de contur, când rolul său, în ciuda diferențelor enumerate, este preluat complet de graniță? Nu există multe situații, dar apar:

• crearea de rame complexe multicolore;
• adăugarea unui cadru la un element atunci când treceți mouse-ul peste el;
• ascunderea chenarului pe care browserul îl adaugă automat unor elemente la primirea focalizării;
• pentru contur, puteți seta distanța de la marginea elementului la cadru folosind proprietatea outline-offset, pentru a crea .

Rame multicolore

Trebuie să înțelegeți că conturul nu înlocuiește în niciun fel chenarul și poate exista cu ușurință împreună cu acesta, așa cum se arată în exemplul 1.

Exemplul 1: Crearea unui cadru

În acest exemplu, în jurul elementului este adăugat un cadru negru, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Încadrați în jurul elementului

Cadrul când se utilizează: hover

Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2).

Exemplul 2: Cadru pe Hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi modificați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, marginea din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3: Cadru pe Hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, recent versiuni de opera) apare o pictogramă mică în jurul câmpurilor de formular când acestea primesc focalizare. rama de culoare(Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul marginilor

Exemplul 4. Scoaterea cadrului

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero, ei sunt responsabili pentru poziția umbrei și neclaritatea acesteia. Al patrulea parametru în acest caz este responsabil pentru grosimea chenarului, iar al cincilea setează culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră.

Exemplul 4: Utilizarea box-shadow

Rezultat acest exemplu prezentată în fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

În articolul precedent am discutat aplicarea CSS proprietățile border() ale elementelor paginii. Și ți-am promis că îți voi spune cum să folosești imagini pentru a desena chenarele. Despre asta vom vorbi astăzi.

Pentru a folosi imagini pentru a crea chenare, vom folosi proprietatea CSS border-image.

Grosimea chenarelor este setată de proprietate, iar dacă se specifică chenar: 0, atunci chenarul nu este afișat. Cu alte valori de margine, imaginea are întotdeauna prioritate. Fundalul, dacă este specificat prin proprietatea de fundal, este afișat sub cadru.

Sintaxa codului

Să ne uităm la un exemplu de înregistrare a proprietății:

url (images/bg-image.png) — adresa imaginii de fundal.

30 - pot exista una, două, trei sau patru valori care indică dimensiunile părților imaginii în pixeli, definind astfel zonele de divizare a imaginii. Unitățile în sine nu sunt scrise, doar numărul (10, nu 10px). În figură, liniile roșii evidențiază zonele necesare pentru a crea cadrul.

Puteți utiliza una, două, trei sau patru valori, separate printr-un spațiu. Efectul depinde de numărul de valori și este prezentat în tabel.

rotund rotund — doi parametri (pentru marginile orizontale, respectiv verticale). Poate lua una dintre cele trei valori. Rezultatul se vede in poze.

întinde— Întinde desenul de chenar la dimensiunea elementului. Aceasta este valoarea implicită.
repeta— Repetează modelul de chenar.
rundă— Repetează desenul și îl scalează astfel încât să existe un număr întreg de imagini pe partea elementului.

Compatibilitate browser

Din păcate, nu toate versiunile de browser acceptă proprietatea bordur-image. Pentru o mai bună compatibilitate, este recomandabil să înregistrați proprietatea pentru toate browserele.

Exemplu de cod:

Automatizare

Există instrumente pe web care ne ajută să scriem cod. Există un constructor foarte convenabil pentru proprietatea border-image. Pur și simplu încărcați imaginea de chenar acolo (apropo, puteți găsi o mulțime de ele pe internet). Folosind glisoarele, împărțiți imaginea în zone, setați grosimea marginii și parametrii de repetare.

Mai mult, imediat, în modul online vezi rezultatul (ce se întâmplă până la urmă).

Când obțineți rezultatul dorit, tot ce trebuie să faceți este să copiați codul generat și să-l lipiți în codul paginii (fișier CSS).

Foarte simplu și convenabil.

Concluzie

Aceasta încheie discuția noastră despre proprietățile de frontieră în CSS. Nu-ți spun la revedere. În viitorul apropiat vom continua pregătirea în layout. Abonați-vă la actualizări...și...Ne vedem!