Limitele elementelor

Stilul de frontieră

Proprietatea în stil de frontieră specifică tipul de frontieră pe care să-l afișați.

Niciuna dintre proprietățile de graniță nu va avea ANI efect până când nu este setată proprietatea stilului de frontieră!







Valorile stilului de frontieră

niciunul: nici o frontieră

punctat: Bord de puncte

zgâlțâit: frontieră punctată

solid: limită solidă

dublu: frontieră dublă. Lățimea marginii duble este egală cu lățimea de margine a valorii

Groove: Definește o margine de relief 3D. Efectul depinde de valoarea culorii de margine

crestă: Specifică o graniță asemănătoare 3D. Efectul depinde de valoarea culorii de margine

inset: Specifică marginea imprimată 3D. Efectul depinde de valoarea culorii de margine

început: Specifică granița convexă 3D. Efectul depinde de valoarea culorii de margine

Lățimea frontală

Proprietatea Lățime de margine este folosită pentru a seta lățimea marginii.

Lățimea este setată în pixeli sau cu una din cele trei valori predefinite: subțire, medii sau groase.

Notă: Proprietatea "Lățime de margine" nu funcționează dacă este utilizată singură. Utilizați mai întâi proprietatea "stil de frontieră" pentru a stabili limitele.


Încercați-l singur »
Faceți clic pe butonul "Încercați-l singur" pentru a vedea cum funcționează.

Border Color

Proprietatea pentru culoarea frontală este utilizată pentru a seta culoarea frontală. Culoarea poate fi setată utilizând:

  • nume - specificați numele culorii, de exemplu "roșu"
  • RGB - specificați valoarea RGB, de exemplu "rgb (255,0,0)"
  • Hex - specificați o valoare hexazecimală, de exemplu "# ff0000"

De asemenea, puteți seta culoarea frontală la "transparent".

Notă: Proprietatea "border-color" nu funcționează dacă este utilizată singură. Mai întâi, setați proprietatea "stil de frontieră" pentru a seta limitele.








Încercați-l singur »
Faceți clic pe butonul "Încercați-l singur" pentru a vedea cum funcționează.

Border - Decorarea individuală a părților

În CSS, puteți specifica diferite limite pentru diferite părți:

p
<
stil de vârf: punctat;
stil de frontieră-dreapta: solid;
border-bottom-style: punctat;
stânga-stil stâng: solid;
>


Încercați-l singur »
Faceți clic pe butonul "Încercați-l singur" pentru a vedea cum funcționează.

Exemplul de mai sus poate fi remapat utilizând o proprietate:


Încercați-l singur »
Faceți clic pe butonul "Încercați-l singur" pentru a vedea cum funcționează.

Proprietatea în stil de frontieră poate avea de la una la patru valori.

  • stilul frontal: punctat solid dublu spart;
    • limita superioară este din punctele
    • dreapta - solidă
    • limita inferioară este dublă
    • marginea stângă este punctată

  • stil de frontieră: dublu solid punctat;
    • limita superioară este din punctele
    • dreapta și stânga - solidă
    • limita inferioară este dublă

  • stilul frontal: solid punctat;
    • Limitele superioare și inferioare sunt din puncte
    • dreapta și stânga - solidă

  • stilul frontal: punctat;
    • toate cele patru limite - din puncte

Proprietatea în stil de frontieră este utilizată în exemplul de mai sus. Cu toate acestea, aceasta funcționează și cu proprietățile de lățime a frontierei și de culoare.

Border - proprietate scurtă (scurtată)

După cum puteți vedea în exemplele de mai sus, există destul de multe proprietăți pentru granițe.

Pentru a scurta codul, puteți specifica toate proprietățile frontierei într-o singură proprietate. Se numește o proprietate stenografică (sau abreviată).

Proprietatea stenografică pentru proprietățile de frontieră este "frontieră":

margine: 5 pix rosu solid;


Încercați-l singur »
Faceți clic pe butonul "Încercați-l singur" pentru a vedea cum funcționează.

Atunci când se utilizează proprietatea de frontieră, ordinea valorilor este:

Puteți săriți anumite valori (deși proprietatea în stil de frontieră este în continuare necesară), principalul lucru este să salvați ordinea specificată.

Mai multe exemple

Setarea stilului de margine inferioară
Acest exemplu demonstrează modul de setare a stilului de margine inferior.

Setarea lățimii marginii din stânga
Acest exemplu demonstrează modul de setare a lățimii marginii din stânga.

Setarea culorii a patru borduri
Acest exemplu demonstrează modul de setare a culorii celor patru borduri. Acestea pot avea de la una la patru culori.

Setarea culorii de la marginea din dreapta
Acest exemplu demonstrează modul de setare a culorii de la marginea din dreapta.

Toate proprietatile CSS Border







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: