Limitele Css

Proprietatea CSS Properties Edge

În proprietățile de graniță CSS, puteți specifica stilul, lățimea și culoarea marginii elementului.

Acest element are un canal de margine, care are o lățime de 15px și verde.







Stilul de frontieră

ceea ce definește stilul de frontieră. ce fel de frontieră. pentru a afișa.

Sunt permise următoarele valori:

  • dotted - Specifică cadrul punctat,
  • dashed - Specifică marginea întreruptă
  • Solid - Definește o margine solidă
  • dublu - Definește marginea dublă
  • Groove - Definește marginea 3D ondulată. Efectul depinde de dimensiunea marginii de culoare
  • creastă - Definește marginea de creastă a 3D. Efectul depinde de dimensiunea marginii de culoare
  • inset - Definește limitele bara laterală 3D. Efectul depinde de dimensiunea marginii de culoare
  • început - Definește marginea inițială 3D. Efectul depinde de dimensiunea marginii de culoare
  • nici unul - nu definește limitele
  • ascuns - Definește o frontieră ascunsă

O proprietate în stil de frontieră poate avea una până la patru valori (pentru marginea superioară, pentru marginea dreaptă, pentru marginea inferioară și pentru marginea din stânga).

O frontieră punctată.

O margine întreruptă.

O frontieră dublă.

O margine de groove. Efectul depinde de valoarea culorii de frontieră.

O margine de creastă. Efectul depinde de valoarea culorii de frontieră.

O margine insetată. Efectul depinde de valoarea culorii de frontieră.

O frontieră inițială. Efectul depinde de valoarea culorii de frontieră.

O graniță ascunsă.

Notă: Niciuna dintre celelalte proprietăți de graniță CSS. descrise mai jos. nu va avea nici un efect. dacă proprietatea în stil de frontieră nu este setată!

Lățimea cadrului

Proprietatea latime a frontierei specifică lățimea celor patru margini.

Lățimea poate fi setată ca o anumită dimensiune (în pixeli, pt, cm, em etc.). sau folosind una din cele trei valori predefinite: subțiri, medii sau groși.

Proprietatea pentru lățimea marginii poate avea una sau patru valori (pentru marginea superioară, pentru marginea dreaptă, pentru marginea inferioară și pentru marginea din stânga).

p.one stil de frontieră: solid;
lățimea frontală: 5px;
>

p.two stil de frontieră: solid;
lățimea latimei: mediu;
>

p.three stil de frontieră: solid;
lățimea frontală: 2px 10px 4px 20px;






>

Culoare de culoare

se utilizează proprietatea de culoare la capăt. pentru a seta culoarea celor patru margini.

Culoarea poate fi setată utilizând:

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

O proprietate a culorii de frontieră poate avea una sau patru valori (pentru marginea superioară, pentru marginea dreaptă, pentru marginea inferioară și pentru marginea din stânga).

Dacă culoarea de margine nu este setată, ea moștenește culoarea elementului.

p.one stil de frontieră: solid;
culoare-limită: roșie;
>

p.two stil de frontieră: solid;
culoarea frontală: verde;
>

p.three stil de frontieră: solid;
frontieră-culoare: roșu verde albastru galben;
>

Border - Partide individuale

Din exemplele de mai sus, ați văzut că puteți specifica o altă limită pentru fiecare parte.

În CSS există, de asemenea, proprietăți pentru specificarea fiecărei frontiere (de sus, de la dreapta, de jos și de la stânga la dreapta):

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

Exemplul de mai sus dă același rezultat ca acesta:

p stil de frontieră: solid punctat;
>

Deci, iată cum funcționează:

Dacă proprietatea în stil de frontieră are patru semnificații:

  • Stil de frontieră. zgâlțâit dublu spart;
    • Limita superioară punctată
    • granița dreaptă este solidă
    • limita inferioară este de jumătate
    • frontiera din stânga este întreruptă

Dacă proprietatea în stil de frontieră are trei valori:

  • Stil de frontieră. punctat solid dublu;
    • Limita superioară punctată
    • stânga și dreapta sunt solide
    • limita inferioară este de jumătate

Dacă proprietatea în stil de frontieră are două semnificații:

  • Stil de frontieră. un solid punctat;
    • limitele superioare și inferioare sunt punctate
    • stânga și dreapta sunt solide

Dacă proprietatea în stil de frontieră are o valoare:

Proprietatea în stil de frontieră este utilizată în exemplul de mai sus. Cu toate acestea, funcționează și cu lățimea marginii și culoarea frontală.

Boundary - o proprietate stenografică

După cum puteți vedea din exemplele de mai sus, există multe proprietăți pe care trebuie să le luați în considerare atunci când lucrați cu limite.

Pentru a scurta codul, puteți specifica și toate proprietățile de graniță individuale din aceeași proprietate.

proprietatea imobiliară transfrontalieră generalizează pentru următoarele proprietăți de graniță:

  • border-width
  • stil de frontieră (obligatoriu)
  • border-color

p: 5px roșu solid;
>

Mai multe exemple

Toate cele mai bune proprietăți de graniță dintr-o singură declarație
Acest exemplu demonstrează o proprietate prescurtată pentru setarea tuturor proprietăților pentru marginea superioară într-o singură declarație.

Setează stilul marginii de jos
Acest exemplu arată modul de setare a stilului de margine inferior.

Setați lățimea marginii din stânga
Acest exemplu arată modul de setare a lățimii marginii din stânga.

Setați culoarea celor patru margini
Acest exemplu arată modul de setare a culorii celor patru borduri. Poate avea de la una la patru culori.

Setați culoarea frontierei drepte
Acest exemplu arată modul de setare a culorii frontalului drept.

Verificați-vă cu exercițiile!

Toate CSS Properties Edge







Articole similare

Trimiteți-le prietenilor: