Vă urez bun venit pe paginile acestui site. Blogul meu este dedicat în principal tehnologiilor html și css, cu care puteți crea șabloane de site-uri. Foarte des, atunci când proiectați, este necesar să rotunji unul sau mai multe colțuri ale elementului dorit. Anterior, acest lucru a fost făcut prin introducerea imaginii corespunzătoare, dar astăzi în colțurile rotunjite css este mult mai ușor. Să urmărim cum.
Rotunjirea unghiurilor elementelor de bloc
Implicit, blocul are unghiuri drepte. Nu întotdeauna este necesar pe un design - rotunjit de multe ori face butoane, elemente de meniu și chiar containere generale. Și toate datorită noii proprietăți - raza de graniță. Înainte de apariția sa, rotunjirea nu a putut fi făcută cu css.
Îmi voi arăta din nou lucrarea pe exemplul unui bloc galben obișnuit. Pentru simplitate, elementul meu va fi patrat - 150 cu 150 de pixeli. Voi da blocului acest stil:
Să vedem cum sa schimbat aspectul lui.
Pentru elementul 150 pe 150 aceasta este deja o rotunjire semnificativă, astfel încât sa schimbat semnificativ de la forma originală.
Cum se face un cerc perfect dintr-un pătrat
Valoarea razei de graniță poate fi stabilită nu numai în pixeli, ci în procente. Dacă aveți nevoie să transformați un element pătrat într-un cerc, este suficient să scrieți acest lucru:
Acesta va funcționa numai dacă elementul are aceeași lățime și înălțime. Dacă dimensiunile sunt diferite, atunci elementul va avea o formă ovală.
Se rotunjează pentru fiecare unghi separat
CSS oferă o altă mare oportunitate - de a specifica rotunjirea pe fiecare parte separat. Acest lucru se poate face în două moduri:
1. Utilizați proprietățile rafturilor din partea frontală-stânga-stânga, raza marginii-fund-stânga, raza de fund-dreapta-dreapta și raza de sus-dreapta-dreapta. Uneori pot fi folosite, dar a doua opțiune este mai convenabilă.
2. Această metodă constă în a seta rotunjirea utilizând proprietatea razei de margine, scriind patru valori simultan cu ajutorul unui spațiu - pentru stânga-sus, dreapta-sus, stânga-jos și colțul din dreapta jos. Este într-o astfel de ordine - acest lucru este important.
Să încercăm:
Astfel, numai colțurile superioare au fost rotunjite. Dacă, dimpotrivă, am lăsat primele două valori zero, iar al treilea și al patrulea set, rotunjirea ar apărea în colțurile de jos. A scrie este posibil și așa:
În acest caz, prima valoare specifică rotunjirea pentru colțurile din stânga sus și jos, iar cea de-a doua pentru colțurile superioare din dreapta și inferioară. Aici o logică interesantă.
Caracteristici avansate
De fapt, valorile pot fi scrise prin slash. Implicit, raza de graniță se rotește numai pe o axă și există încă posibilitatea de a face acest lucru pentru cealaltă. Să scriem așa:
Și astfel blocul a înflorit ca rezultat al acestor acțiuni.
Prin urmare, în acest caz, prescripția pentru fiecare parte acționează separat.
Acesta este cazul când este mai bine să încercați o dată decât să citiți o sută de ori. Încearcă-o singură, experimentați. Aspectul elementului va varia în funcție de dimensiunile sale originale și de valorile pe care le veți da.
Am un singur avertisment: dacă încercați să scrieți ceva de genul:
Se pare că se observă totul - se înregistrează valorile pentru toate cele patru laturi. Dar crezi că unitatea își va schimba cumva aspectul? Nu, pentru că browserul nu poate doar să răsucească elementul. Prin urmare, lucrați cu proprietatea, dar nu exagerați, deoarece atunci proprietatea ar putea să nu funcționeze deloc.
Deci, asta sunt toate informațiile pe care vroiam să le spun astăzi despre rotunjirea colțurilor. De asemenea, aș dori să menționez că proprietatea a apărut în versiunea CSS 3. În consecință, în browserele mai vechi nu este acceptată. Internet Explorer acceptă proprietatea cu a zecea versiune.
Ei bine, astăzi am stabilit cum să rotunjim colțurile în CSS. Sper că informațiile au fost utile pentru dvs.
Interesant de lumea construirii site-urilor
V-ați abonat. Mulțumesc.