Bordura CSS: raza, culoarea, stilul și alte proprietăți ale marginii CSS. De ce aveți nevoie de o chenară transparentă în CSS și cum să o faceți

Pentru a controla chenarul unui element, utilizați proprietatea generică border. 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 diferită a chenarului.

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, spre deosebire de HTML, chenarul unui element poate fi nu numai solid. Următoarele valori sunt acceptate 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 marginii poate fi specificată în orice unitate de măsură absolută, 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:

Există, de asemenea, valori ale cuvintelor cheie pentru proprietatea border-width. Sunt trei în total:

• subțire - margine 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.
• Formatul RGB este rgb(255,12,110). Format RGBA pentru CSS3.
• Formatele HSL și HSLA pentru CSS3.
• Numele culorii, de exemplu negru. Pentru o listă completă a numelor de culori, consultați tabelul CSS Color Names.

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
• 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 chenarului drept al 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 fost introdusă în CSS3 și funcționează corect în toate browserele moderne, cu excepția Internet Explorer 8 (și versiunile 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 pentru 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; /* Centrați blocul */ padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea-chenar-jos: roșu;

Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru a percepe mai bine conținutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxă de margine CSS

granita: border-width border-style border-color | moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (difer doar în lățime în pixeli)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • liniuță - cadru format din liniuțe
  • solid - linie simplă (folosită cel mai des)
  • dublu - cadru dublu
  • groove - chenar 3D canelat
  • creastă, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi specificat folosind un nume de culoare specific sau în format RGB (vezi numele culorilor html pentru site)

Notă

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai frecvent utilizată este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

stil de chenar: punctat

stil de chenar: punctat

stil de chenar: solid

chenar-stil: dublu

border-style: canelura

border-style: creasta

chenar-stil: insert

border-style:început

Patru rame diferite

stil de chenar: punctat

stil de chenar: punctat

stil de chenar: solid

chenar-stil: dublu

border-style: canelura

border-style: creasta

chenar-stil: insert

border-style:început

Patru rame diferite

2.2. Exemplu. Schimbați culoarea cadrului la trecerea mouse-ului

Acest exemplu este foarte simplu, dar interesant. Acesta arată cum pseudoclasa :hover și chenarul CSS pot fi folosite pentru a crea efecte simple (cum ar fi meniuri).

Când treceți mouse-ul peste un bloc, culoarea cadrului se va schimba

Cam asa arata pe pagina:

2.3. Exemplu. Cum să faci o chenară transparentă

Cadrul poate fi transparent. Acest efect este rar, dar uneori poate fi foarte util pentru web designeri. Pentru a seta transparența, trebuie să utilizați setarea de culoare în forma RGBA (R, G, B, P), unde ultimul parametru setează transparența (număr real de la 0,0 la 1,0)

Cam asa arata pe pagina:

3. Grosimea chenarului: proprietatea lățimii chenarului

Setează grosimea liniei. Anterior, am specificat-o într-o singură descriere a frontierei.

Sintaxă CSS de lățime a marginii

lățimea graniței: subțire | mediu | gros | sens;

• subțire - grosime linie subțire
• medie - grosime medie a liniei
• gros - grosime linie groasă

Mai jos sunt câteva exemple. Cel mai neobișnuit lucru va fi grosimea diferită a chenarului pe fiecare parte.

lățime margine: subțire

lățime margine: medie

lățime margine: gros

Grosimi diferite la margini

Cam asa arata pe pagina:

lățime margine: subțire

lățime margine: medie

lățime margine: gros

Grosimi diferite la margini

4. Cum să faci un cadru de chenar pe o singură margine (chenar)

Proprietatea border CSS are proprietăți derivate pentru setarea chenarelor unilaterale pe un element:

• border-top - pentru a seta chenarul de sus (chenarul de sus)
• border-bottom - pentru a seta un chenar în partea de jos (chenar de jos)
• border-right - pentru a seta chenarul din dreapta (chenarul din dreapta)
• border-left - pentru a seta chenarul din stânga (chenarul din stânga)

Aceste limite pot fi combinate, de ex. Scrieți propriul cadru pentru fiecare direcție. Sintaxa este exact aceeași cu border.

Există și proprietăți

• border-top-color - setați culoarea chenarului superior
• border-top-style - setarea stilului chenarului superior
• border-top-width - setarea grosimii marginii superioare
• etc. pentru fiecare direcție

În opinia mea, este mai ușor să scrieți totul într-o linie decât să creați text suplimentar în stiluri. De exemplu, următoarele proprietăți vor fi aceleași

/* Descrierea a două stiluri identice: */

4.1. Exemplu. Cadru frumos pentru evidențierea citatelor

Exemplu de cadru citat

Cam asa arata pe pagina:

Exemplu de cadru citat

Notă
Puteți seta un chenar separat pentru fiecare parte.

5. Cum să adăugați mai multe chenare la un element html

Uneori trebuie să faci mai multe chenare. Să dăm un exemplu

5.1. Prima opțiune cu mai multe margini

Cam asa arata pe pagina:

Există o a doua cale prin umbrire.

5.2. Suprapuneți umbre pentru a crea mai multe chenaruri

Cam asa arata pe pagina:

6. Rotunjirea colțurilor la margini (chenar-rază)

Pentru a crea chenare frumoase, utilizați proprietatea CSS border-radius (disponibilă numai în CSS3). Poate fi folosit pentru a crea colțuri rotunjite, care creează un aspect complet diferit. De exemplu

7. Linie indentată CSS

Liniile deprimate pot arăta impresionant pe un fundal întunecat, care nu este potrivit pentru fiecare site.

---

Cam asa arata pe pagina:

Pentru a accesa bordura din JavaScript, trebuie să scrieți următoarea construcție:

document.getElementById("elementID").style.border="VALOARE"

cadru CSS3 completează capacitatea de a forma chenarele elementelor cu proprietăți care permit după colțuri element și, de asemenea, utilizarea Imagini pentru a proiecta marginile elementului.

Colțuri rotunjite și rame pentru fotografii

1. Colțuri de rotunjire cu rază-chenar

Suport pentru browser

IE: 9.0
Firefox: 4.0
Crom: 4.0
Safari: 5.0, 3.1 -webkit-
Operă: 10.5
iOS Safari: 7.1
Opera mini: —
Browser Android: 4.1
Chrome pentru Android: 44

Proprietatea vă permite să rotunjiți colțurile elementelor inline și bloc. Curba pentru fiecare unghi este definită folosind una sau două raze care îi definesc forma − cerc sau elipsă. Raza se aplică întregului fundal, chiar dacă elementul nu are chenar, poziția exactă a secantei este determinată folosind proprietatea background-clip.

Proprietatea border-radius vă permite să rotunjiți toate colțurile simultan și folosind proprietățile border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius poate rotunji fiecare colț separat.

Dacă setați două valori pentru proprietatea rază de frontieră, prima valoare se va rotunji stânga susȘi colțul din dreapta jos, iar al doilea - sus în dreaptaȘi stânga jos.

Valori specificate prin / determina orizontalăȘi razele verticale. Proprietatea nu este moștenită.

Opțiuni

Div (lățime: 100px; înălțime: 100px; chenar: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px;). ; ;) .r4 (raza-chenar: 10px/20px;) .r5 (raza-chenar: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (raza-chenar: 10px 20px 30px 40px;)px/.30px ( chenar-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-stânga-radius: 100px;).r10 ( border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-raza-sus-stânga-raza: 100% 20px; chenar-jos-dreapta-raza: 100% 20px ;)
Orez. 1. Exemple de diferite opțiuni pentru rotunjirea colțurilor blocurilor

2. Chenar-imagine

Suport pentru browser

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Crom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Operă: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera mini: 8 -o-
Browser Android: 4.4, 4.1 -webkit-
Chrome pentru Android: 42

Proprietatea vă permite să setați o imagine ca cadru al elementului. Principala cerință pentru imagine este ca aceasta să fie simetrică. Proprietatea include următoarele valori: (border-image: width source slice repeat start;) .

Folosind o imagine atât de simplă, puteți obține cadre ca acesta pentru un element.

/* Exemplul 1 */ div ( lățime: 260 px; înălțime: 100 px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch ) /* Exemplul 2 */ div ( lățime: 260 px; înălțime: 100 px; border-style: solid; border-image-width: 15 px; border-image-source: url(border_round. png); bordura-imagine-slice: 30;
Orez. 2. Un exemplu de proiectare a limitelor blocurilor folosind o imagine

Tăieturile A - B - C - D formează colțurile cadrului, iar partea din imagine situată între ele umple spațiul rămas al cadrului în conformitate cu valoarea specificată a proprietății margine-imagine-repetare. Mărimea părții de colț (în acest exemplu numărul 30) este setată folosind valoarea proprietății border-image-slice.

2.1. chenar-imagine-lățime

Proprietatea specifică lățimea imaginii pentru chenarul elementului. Dacă lățimea nu este specificată, aceasta este implicită la 1.

chenar-imagine-lățime
Valori:
lungime	Setează lățimea chenarului în unități de lungime - px/em. Puteți seta de la una până la patru valori odată. Dacă este specificată o valoare, atunci lățimea tuturor laturilor cadrului este aceeași, două valori specifică lățimea sus-jos și dreapta-stânga etc.
număr	Valoarea numerică cu care se înmulțește valoarea lățimii marginii.
%	Lățimea marginii elementului este calculată în raport cu dimensiunea imaginii. Orizontală în raport cu lățimea, verticală - în raport cu înălțimea.
auto	Corespunde valorii chenar-imagine-slice.
iniţială
moşteni

Sintaxă

Div (border-image-width: 30px;) Fig. 3. Un exemplu de setare a lățimii unui cadru de imagine folosind diferite tipuri de valori

2.2. marginea-sursa-imagine

Proprietatea specifică calea către imagine care va fi folosită pentru a decora marginile blocului.

Sintaxă

Div (border-image-source: url(border.png);)

2.3. elemente chenar-imagine-slice

Proprietatea determină dimensiunea părților imaginii utilizate pentru a defini marginile elementului și împarte imaginea în nouă părți: patru colțuri, patru margini între colțuri și o parte centrală.

Valori:
număr	Dimensiunea părților cadrului poate fi setată folosind una, două, trei sau patru valori. O valoare setează chenarele să aibă aceeași dimensiune pe fiecare parte a elementului. Două valori: prima determină dimensiunea marginilor de sus și de jos, a doua - cele din dreapta și din stânga. Trei valori: prima determină dimensiunea marginii de sus, a doua - dreapta și stânga, iar a treia - marginea de jos. Patru valori: definește dimensiunile marginilor de sus, dreapta, jos și stânga. Valoarea numerică reprezintă numărul de px.
%	Dimensiunile marginilor sunt calculate în raport cu dimensiunea imaginii. Orizontală în raport cu lățimea, verticală - în raport cu înălțimea.
completati	Valoarea este indicată împreună cu un număr sau un procent. Dacă este specificată, imaginea nu este tăiată de marginea interioară a cadrului, ci umple și zona din interiorul cadrului.
iniţială	Setează această proprietate la valoarea implicită.
moşteni	Moștenește valoarea acestei proprietăți de la elementul părinte.

Sintaxă

Div (border-image-slice: 50 20;)
Orez. 4. Un exemplu de specificare a segmentelor de cadru de imagine

2.4. chenar-imagine-repetare

Această proprietate controlează modul în care imaginea de fundal umple spațiul dintre colțurile cadrului. Poate fi specificat folosind fie o singură valoare, fie o pereche de valori.

Sintaxă

Div (border-image-repeat: repetare;) Fig. 5. Exemplu de repetare a părții centrale a unui cadru de imagine folosind diferite tipuri de valori

2.5. margine-imagine-început

Proprietatea vă permite să mutați cadrul imaginii dincolo de marginile elementului cu o lungime specificată. Poate fi specificat folosind una sau patru valori.

Sintaxă

Div (border-image-start: 10px;)
Orez. 6. Un exemplu de deplasare a unui cadru de imagine folosind diferite tipuri de valori

3. Decalaj cadru exterior outline-offset

Proprietatea specifică distanța dintre chenarul elementului de chenar și chenarul exterior creat folosind proprietatea contur.

/*Figura 1:*/ img ( chenar: 1px roz continuu; contur: 1px gri întrerupt; outline-offset: 3px; ) /*Figura 2:*/ img (border-width: 1px 10px; chenar-stil: solid; chenar-culoare: roz contur: 1px gri punctat: 3px;
Orez. 7. Un exemplu de decorare a unei imagini cu un cadru exterior

4. Cadru gradient

Valoarea imaginii-chenar poate fi nu numai o imagine, ci și o umplere cu gradient.

Cadru translucid

Una dintre culori este transparentă. În acest fel, puteți seta limite pentru toate părțile unui element simultan sau separat pentru fiecare parte. Grosimea chenarului este controlată de proprietatea border-width.

* (box-sizing:border-box;).wrap ( înălțime: 200px; padding: 25px; fundal: #00E4F6; ) .gradient (înălțime: 150px; lățime: 50%; margine: 0 auto; chenar: 10px solid transparent ; chenar-imagine: liniar-gradient (la dreapta, transparent 0%, #ADF2F7 100%);

Plic poștal

* (box-sizing:border-box;).wrap ( înălțime: 200px; padding: 25px; ) .gradient (înălțime: 150px; lățime: 50%; margine: 0 auto; chenar: 10px solid transparent; chenar-imagine: 10 gradient liniar care se repetă (45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

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 utilizând proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare pentru stilul chenar, etc. Nu moștenit.

stil de chenar (stil chenar-sus, chenar-stil dreapta, chenar-stil jos, chenar-stil stânga)
Valori:
nici unul	Valoarea implicită înseamnă că nu există cadru. De asemenea, elimină cadrul unui element dintr-un grup de elemente cu valoarea acestei proprietăți setată.
ascuns	Echivalent cu niciunul.
punctat	punctat
întreruptă	întreruptă
solid	solid
dubla	dubla
canelură	canelură
creastă	creastă
medalion	medalion
început	început
{1,4}	Afișarea a patru stiluri diferite pentru chenarul unui element simultan, doar pentru proprietatea stil de chenar: (stil de chenar: solid punctat, niciun punctat;)
iniţială
moşteni

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.

chenar-culoare (culoare-chenar-sus-culoare, chenar-culoare-dreapta, chenar-culoare-jos, chenar-culoare-stânga)
Valori:
transparent	Setează culoarea transparentă pentru chenar. În același timp, lățimea cadrului rămâne. Poate fi folosit pentru a schimba culoarea chenarului atunci când treceți mouse-ul peste un element pentru a evita deplasarea elementului.
culoare	Culoarea cadrelor este setată folosind valorile proprietății. (culoare-chenar: #cacd58;)
{1,4}	Listarea a patru culori diferite pentru marginile unui element simultan, doar pentru proprietatea border-color: (culoare-chenar: #cacd58 #5faf8a #b9cea5 #aab238;)
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

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-style este setată la niciunul și marginea elementului este setată la o anumită lățime, atunci în acest caz lățimea marginii 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 casetei elementului, ceea ce, la rândul său, poate duce la suprapunerea suprapunerii exterioare a elementului și a zonelor adiacente.

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 dacă este setată valoarea stilului 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; )

Sunt sigur că ești deja familiarizat cu proprietatea border css. Veți învăța ceva nou pe care nu le știați înainte despre bordura css? Ei bine, nu numai că vei învăța, dar vei vedea și câteva lucruri noi pe care nu le-ai știut niciodată înainte!

Nu numai că CSS3 poate fi folosit pentru a crea colțuri rotunjite, dar codul CSS pur poate fi folosit și pentru a crea forme complexe. Anterior, puteai folosi imaginea de fundal pentru a crea aspectul colțurilor rotunjite. Datorită noilor tehnici de utilizare a borderului, putem face acest lucru cu cod CSS pur.

Elementele de bază ale utilizării bordurii css

Probabil că sunteți deja familiarizat cu utilizarea standard a proprietății de frontieră:

Chenar: 1px negru solid;

Codul de mai sus va scoate un chenar de 1 px care va fi negru. Simplu și ușor. De asemenea, puteți extinde puțin sintaxa:

Lățimea chenarului: gros; chenar-stil: solid; culoare-chenar: negru;

În plus, puteți utiliza valori specifice pentru proprietatea border-width, trei cuvinte cheie: subțire, mediu, gros.

Dar utilizarea sintaxei extinse nu este întotdeauna practică. Să ne uităm la un exemplu când trebuie să schimbați culoarea unui cadru bloc atunci când treceți mouse-ul. În acest caz, folosirea sintaxei scurte este mult mai simplă:

Casetă ( chenar: 1px roșu continuu; ) .box:hover ( chenar: 1px verde continuu; )

O modalitate mai elegantă și mai simplă de a face acest lucru este:

Casetă (chenar: 1px roșu continuu; ) .box:hover (border-culoare: verde; )

După cum puteți vedea, tehnica avansată este utilă și atunci când schimbăm doar unele proprietăți: lățime, stil, culoare și altele.

Frontiera-Raza

Frontieră-rază- Aceasta este proprietatea „de aur” a CSS3 - prima, cea mai comună proprietate care a devenit practică și utilă. Cu excepția IE8 și a versiunilor de mai jos, toate browserele afișează colțuri rotunjite folosind aceasta.

Deși, este necesar să folosiți prefixe speciale pentru Webkit și Mozilla pentru ca stilul să fie corect.

Webkit-border-radius: 10px; -moz-border-radius: 10px; chenar-rază: 10px;

În zilele noastre, putem elimina prefixele speciale și putem folosi forma standard de chenar-rază.

Un alt avantaj este că putem folosi valori speciale pentru fiecare parte a blocului:

Chenar-raza-sus-stânga: 20px; raza-chenar-sus-dreapta: 0; raza-chenar-jos-dreapta: 30px; raza-chenar-jos-stânga: 0;

În codul de mai sus, setarea chenarului-sus-dreapta-rază și chenar-jos-stanga-razei la „null” poate obține niște forme uimitoare. Deși elementul poate moșteni unele proprietăți care vor trebui resetate.

Similar cu marginea și umplutura, putem comprima sintaxa:

/* stânga sus, dreapta sus, dreapta jos, stânga jos */ border-radius: 20px 0 30px 0;

Ca exemplu de utilizare a proprietății border-radius, vă voi arăta o „lămâie” pe care designerii o folosesc adesea atunci când proiectează site-uri web:

Lămâie ( lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px; )

Să trecem dincolo de elementele de bază

Pentru mulți designeri, toate cunoștințele în domeniul proprietăților de frontieră CSS se termină aici. Dar există și alte lucruri interesante pe care le poți folosi pentru a crea lucruri uimitoare!

Structuri complexe de frontieră css

Există multe tehnici de creare a modelelor folosind structuri complexe de frontieră. De exemplu, să ne uităm la următoarele...

Stil de frontieră

Folosim întotdeauna cele mai cunoscute proprietăți solide, punctate și punctate. Dar există câteva alte proprietăți în stilul graniței: groove și creasta.

Chenar: canelura de 20px #e3e3e3;

Sau în sintaxă extinsă:

Culoare chenar: #e3e3e3; lățime chenar: 20px; chenar-stil: canelura;

Deși aceste proprietăți sunt utile, ele nu reprezintă baza pentru crearea cadrelor complexe.

Contur

Cea mai populară tehnică pentru crearea unui chenar dublu este utilizarea proprietății outline.

Casetă (chenar: 5px solid #292929; conturul: 5px solid #e3e3e3; )

Această metodă funcționează excelent, deși ne limitează la doar două cadre. Uneori trebuie să creați un chenar gradient care constă din mai multe straturi... cum atunci?

Pseudo-elemente

Când tehnica conturului nu este suficientă, un remediu alternativ este folosirea pseudo-elementelor:înainte și:după. Cu care puteți adăuga cadre suplimentare unui element:

Casetă ( lățime: 200px; înălțime: 200px; fundal: #e3e3e3; poziție: relativ; chenar: 10px verde continuu; ) /* Creați două casete cu aceeași lățime a containerului */ .box:after, .box:before ( conținut: „”;

Nu pare foarte elegant, dar măcar funcționează. Este puțin dificil să-ți dai seama de succesiunea de culori din cadrul cadrelor... dar poți înțelege.

Cutie-Umbră

O „modalitate” interesantă pentru copii de a crea un efect similar este utilizarea proprietății CSS3 box-shadow:

Casetă (chenar: 5px roșu continuu; umbră casetă: 0 0 0 5px verde, 0 0 0 10px galben, 0 0 0 15px portocaliu; )

În acest caz, am fost mai deștepți și am folosit o proprietate dedicată box-shadow. Schimbând parametrii x, y, estompare la zero, putem folosi diferite culori pentru a crea mai multe cadre.

Dar există o problemă, în browserele mai vechi care nu înțeleg proprietatea box-shadow, va fi vizibil doar un cadru roșu de 5px.

"Tine minte! Designul site-ului ar trebui să arate cross-browser, adică același în toate browserele. Inclusiv versiunile mai vechi.”

Schimbarea unghiurilor

Pe lângă utilizarea valorii simple de bordura-rază, putem specifica două separate - separându-le cu / specificăm o rază orizontală și verticală.

De exemplu:

Chenar-rază: 50px / 100px; /* rază orizontală, rază verticală */

... aceasta este echivalentă cu:

Chenar-raza-sus-stânga: 50px 100px; chenar-sus-dreapta-rază: 50px 100px; raza-chenar-jos-dreapta: 50px 100px; raza-chenar-jos-stânga: 50px 100px;

Această tehnică este potrivită pentru a crea forme de bloc unice. De exemplu, iată cum să creați un efect de hârtie înfășurată:

Casetă ( lățime: 200 px; înălțime: 200 px; fundal: #666; chenar-sus-stânga-rază: 15em 1em; chenar-jos-dreapta-rază: 15em 1em; )

Formulare CSS folosind chenar

Această tehnică arată cum puteți crea formulare CSS, folosind elemente cu dimensiuni zero înălțime și lățime. Uimit? Să ne uităm la un exemplu...

Pentru următoarele câteva exemple, vom folosi următorul marcaj:

...și următorul stil de bază:

Cutie ( lățime: 200 px; înălțime: 200 px; fundal: negru; )

Cel mai obișnuit exemplu de utilizare a formelor CSS este crearea unei săgeți de împachetare. Secretul acestei săgeți constă în crearea unui chenar cu o culoare diferită pentru fiecare parte. Apoi, setați atributele lățime și înălțime la 0.

Să atribuim clasa săgeată blocului div:

Săgeată ( lățime: 0; înălțime: 0; chenar-sus: 100px roșu continu; chenar-dreapta: 100px verde continuu; chenar-jos: 100px albastru continu; chenar-stânga: 100px galben continuu; )

Pentru a demonstra, folosim mai întâi sintaxa extinsă. În continuare, putem elimina codul suplimentar folosind sintaxa scurtă:

Săgeată (lățime: 0; înălțime: 0; chenar: 100px solid; culoarea chenarului: roșu verde albastru galben; )

Interesant, nu-i așa? Acum vom seta culori transparente pe toate părțile, cu excepția părții albastre.

Săgeată ( lățime: 0; înălțime: 0; chenar: 100 px solid; culoarea chenarului de jos: albastru; )

A iesit grozav! Dar asta contrazice aspect semantic, creați un .arrow div, doar pentru a adăuga o săgeată la pagină. În acest scop, putem folosi pseudo-elemente, ceea ce vom face acum.

Creați un balon de vorbire

Pentru a crea un balon de vorbire, avem nevoie de o mică bucată de cod CSS pur și un bloc div.

Balon de vorbire (poziția: relativă; culoarea fundalului: #292929; lățime: 200px; înălțimea: 150px; înălțimea liniei: 150px; /* vertical centru */ culoare: alb; text-align: center; )

Balon de vorbire:după (conținut: „”; )

În această etapă, vom crea săgeata pe care am făcut-o înainte, o vom adăuga la element și tot ce rămâne este să o poziționăm:

Balon: după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoare chenar: roșu verde albastru galben; )

Dacă vrem ca săgeata să indice în jos, va trebui să setăm toate chenarele la transparente, cu excepția celui de sus.

Balon de vorbire:după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoarea chenarului de sus: roșu; )

Când creăm acest formular CSS, nu putem specifica în mod specific dimensiunea săgeții. În schimb, putem seta proprietatea border-width, care va atribui o dimensiune săgeții. De asemenea, vom seta poziția săgeții în partea de jos în mijloc. În consecință, pentru aceasta folosim valorile sus și stânga.

Balon de vorbire:după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; culoarea chenarului de sus: roșu; sus: 100%; stânga: 50%; )

În plus, trebuie doar să îi dăm o culoare la fel ca și blocul. Amintiți-vă, atunci când poziționați, trebuie să luați în considerare dimensiunea celorlalte margini, care sunt invizibile (15px). Vom da și blocului rotunjire la colțuri.

Speech-bubble ( /* … alte stiluri */ border-radius: 10px; ) .speech-bubble: after (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; border-top -culoare: #292929: 100% margin-stânga: -15px;

Nu-i rău, nu? Folosind mai multe clase CSS și trucuri de frontieră, puteți crea așa ceva.

/* Utilizarea bulelor de vorbire: Aplicați clasa .speech-bubble și .speech-bubble-DIRECTION așa cum se arată mai jos

*/ .balon de vorbire (poziție: relativă; culoarea fundalului: #292929; lățime: 200px; înălțime: 150px; înălțime linie: 150px; /* vertical centru */ culoare: alb; text-align: center; chenar- radius: 10px; font-family: sans-serif ) .speech-bubble:after (conținut: ""; poziție: absolut; lățime: 0; chenar: 15px solid; ) /* Poziționați săgeata */ .speech-bubble-sus:după (border-bottom-color: #292929; stânga: 50%; jos: 100%; margin-left: -15px; ) .speech-bubble-right:după (border-left-color : #292929; stânga: 100% margin-sus: -15px; ; ) .speech-bubble-left:after ( chenar-dreapta-culoare: #292929; sus: 50%; dreapta: 100%; margin-sus: -15px; )

Primă! Centrare verticală în bloc

Pentru un rând de text, puteți utiliza line-height. Dar dacă aveți două sau mai multe rânduri de text... Cea mai bună soluție este să setați proprietatea de afișare la tabel și să puneți tot textul într-un paragraf. Iată cum arată în markup html: