Mulți dintre dvs., fără îndoială, deja utilizează granițele CSS atunci când proiectează site-uri Web. La urma urmei, odată cu apariția CSS3, multe lucruri complicate anterior au devenit mult mai ușoare. De exemplu, pentru a afișa cercuri sau săgeți, am recurs anterior la imagini fundal absolut poziționate sau sprite. Acum se face doar cu câteva linii de cod într-un fișier în stil CSS.
În articolul de astăzi, vom analiza principalele puncte atunci când lucrăm cu frontierele în CSS. Sperăm că chiar și cei mai avansați utilizatori vor găsi aici ceva nou pentru ei înșiși.
Definiție scurtă: Proprietatea CSS "frontieră" servește pentru a da elementului o margine și descrie stilul, grosimea și culoarea sa. De regulă, contactele bloc sunt folosite ca element (de exemplu: div, p, h1-h6, etc.).
Intrarea cea mai frecvent utilizată pentru o proprietate este următoarea:
Această înregistrare va oferi elementului un cadru solid gros de 1px și un cadru umplut în negru (# 000).
De asemenea, această linie poate fi scrisă într-o versiune mai extinsă, când specificăm fiecare valoare a proprietății de graniță separat:
Deoarece elementul bloc al unei pagini web poate fi reprezentat drept dreptunghi, este normal ca dezvoltatorii CSS să aibă grijă de toate cele patru laturi. Așa este! Cu această sarcină, valorile individuale pentru fiecare parte a bloc-dreptunghi face față.
De exemplu, dacă luăm valoarea lățimii marginii. atunci poate fi "descompusă" în mai multe înregistrări: lățimea frontală-lățime, marginea-lățimea stângă, limita-lățimea de jos, latura-dreapta-lățimea.
Sau, extindeți ușor înregistrarea sa scurtă (latime-limită: 1px;):
Adică, obținem controlul deplin asupra fiecărei părți a elementului!
P.S. Valorile din stiluri sunt citite în sensul acelor de ceasornic: sus, dreapta, jos, stânga.
Limitarea frontierei frontiere
Odată cu apariția CSS3, această nouă proprietate a câștigat imediat popularitate și este susținută de aproape toate browserele moderne. Folosind această proprietate, puteți crea minuni pe panza unei pagini web!
De asemenea, ca proprietățile anterioare, proprietatea radius-limită poate fi scrisă sub formă abreviată, de exemplu:
dar este posibil și în detaliu:
sau chiar mai detaliat:
Ca un exemplu de caracteristici de proprietate, desenați o lămâie numai cu CSS:
Proprietatea imagine (stil) pentru cadru
Există mai multe reguli generale pentru a acorda frontierei un stil. Acestea sunt: punctat, punctat, solid, dublu, groove, creastă, inet, și început, .
Sau gradientul:
Browserul va primi ceva de genul:
După ce utilizați imaginea ca proprietate de frontieră, o aplicați utilizând proprietatea de imagine de tip margine (specificată în numere sau procente, fără a specifica unități, adică nu este necesar să scrieți extra px).
De exemplu:
De asemenea, este de dorit să specificați proprietatea de lățime a imaginii de frontieră. și anume lățimea imaginii pentru cadru (de exemplu, în pixeli sau ca procent din dimensiunea imaginii).
O scurtă înregistrare a tuturor proprietăților de mai sus ale imaginii ca un cadru arată astfel:
Mai multe frontiere
Există multe metode pentru a aplica mai multe frontiere unui element. Să luăm în considerare elementele de bază.
Metoda cea mai populară pentru crearea a două granițe este folosirea proprietății contur (contur, înclinare exterioară).
De exemplu,
Următoarea metodă utilizează proprietatea Box-Shadow. Deci, puteți crea un număr infinit de frontiere, indicând parametrii lor printr-o virgulă (atunci când suprapusă prima din listă va fi mai mare, ultima - mai jos).
De exemplu,
A treia metodă: folosind pseudo-elementele
Aceasta nu poate fi cea mai elegantă abordare, dar cu siguranță își face treaba. Adevărat, prin această metodă este ușor să confundați și să confundați ordinea în care vor fi aplicate culorile la frontiere.
Utilizați: înainte și după pseudoelemente. și o combinație a metodelor anterioare pentru a da elementului mai multe frontiere.
Cod exemplu:
