Ați văzut vreodată un buton pe o pagină web care are margini rotunjite? Ați văzut vreodată o imagine care se încadrează într-un cerc? Dacă da, ați văzut impactul utilizării proprietății CSS border-radius.

Puteți da oricărui element „colțuri rotunjite” prin aplicarea unei raze de margine prin CSS.

Sintaxa frontieră-rază

Ca și în cazul multor proprietăți CSS referitoare la margini, umplutură și margini, există patru proprietăți individuale – una pentru fiecare colț al unui element de cutie – și o proprietate de prescurtare. Fiecare dintre atributele de colț va accepta una sau două valori.

Proprietatea pe raza chenarului este acceptată în fiecare browser major, dar acestea au atribute specifice browserului. Iată atributele CSS și specifice browserului:

Aflati proprietatea CSS border radius construind un calculator

Fiecare dintre proprietățile individuale ale colțului CSS3 iau una sau două valori de lungime (în general valorile „px” sau „em”). Dacă este furnizată o singură valoare, atunci aceasta devine raza unui colț rotunjit. Dacă sunt furnizate două valori, atunci ele devin razele orizontale și verticale pentru un colț eliptic.

Proprietatea frontieră-rază acceptă singură una sau două valori și le folosește pentru a stiliza toate cele patru colțuri făcând o formă simetrică frumoasă.

Mai aveți nevoie să folosiți prefixuri la frontieră?

Acum, că ți-am arătat prefixurile de chenar specifice browserului, întrebarea este dacă chiar trebuie să le folosești sau poți să scapi doar folosind proprietățile CSS3?

Răspunsul simplu la această întrebare depinde de ce versiune de browsere acceptă site-ul dvs. web.

Firefox 3.6 necesită utilizarea fișierului -moz- prefix. De la 4 în sus, utilizarea proprietăților CSS3 este în regulă.

Safari 4 are nevoie de -webkit- prefix. Safari 5 și versiunile ulterioare acceptă proprietățile CSS3.

iOS3 are nevoie de -webkit- prefix. Acest lucru se aplică numai unui iPhone 3GS sau iPad 1 care nu a fost niciodată actualizat.

Demonstrarea de bază a proprietății raza frontierei

Iată două demonstrații ale razei frontierei. Valoarea furnizată pentru proprietate poate fi în px, rem, em sau%.

div {    width: 100px;    height: 100px;    background-color: #7db9e8;}#demo-one {    border-radius: 20px;}#demo-two {    border-radius: 50%;}
1611480728 901 Aflati proprietatea CSS border radius construind un calculator
# imagine demo-una în stânga și # imagine demo-două în dreapta

Pentru prima divizare, un colț rotunjit de 8 px este aplicat la fiecare colț al diviziunii. În al doilea exemplu, fiecare colț are un colț rotunjit de 50% aplicat, care creează un cerc.

Cu o singură valoare, raza chenarului va fi aceeași pe toate cele patru colțuri ale unui element așa cum se arată mai sus. Aveți opțiunea de a specifica o valoare diferită pentru fiecare colț.

Când specificați valori individuale, atunci acestea sunt aplicate în această ordine: sus stânga, sus dreapta, jos dreapta, jos stânga. Iată un exemplu:

#demo-three {    border-radius: 10em 20em 10em 20em;}#demo-four {    border-radius: 40px 5px;}
1611480728 734 Aflati proprietatea CSS border radius construind un calculator
# imagine demo-trei în stânga și # imagine demo-patru în dreapta

Marginile eliptice

Marginile nu trebuie să fie circulare, dar pot fi și eliptice. Pentru a crea o margine eliptică, puneți o bară („/”) între două valori. Iată un exemplu:

#demo-five {    border-radius: 10% / 50%;}#demo-six {    border-radius: 50% / 10%;}
1611480728 455 Aflati proprietatea CSS border radius construind un calculator
# imagine demo-cinci în stânga și # imagine demo-șase în dreapta

Crearea calculatorului nostru

Vom aplica ceea ce tocmai am aflat despre raza frontierei pentru a crea acest calculator:

1611480729 417 Aflati proprietatea CSS border radius construind un calculator
Imagine a calculatorului pe care o vom face

Cadru Calculator

Mai întâi trebuie să creăm cadrul pentru calculatorul nostru. Partea superioară a calculatorului va avea un arc, iar partea de jos va avea margini rotunjite. Pentru a crea acest design, vom specifica o valoare pentru fiecare colț individual astfel:

.calc-frame {    display: flex;    flex-direction: column;    align-items: center;    max-height: 650px;    max-width: 400px;    width: 90%;    padding: 20px;    border: solid 5px #41403E;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 35px;    border-bottom-left-radius: 35px;    background: #b1b1b1;}
1611480729 317 Aflati proprietatea CSS border radius construind un calculator
Imagine a cadrului calculatorului creat cu CSS de mai sus

Cadru de rezultate al calculatorului

Partea de sus a calculatorului conține totalul care a fost calculat (rezultatul). Acesta este alcătuit din două părți: cadrul exterior și zona de intrare care conține totalul. Cadrul exterior folosește exact aceeași rază a chenarului pentru a avea aceeași arcadă. Iată stilul pentru aceste două elemente:

.calc-result-frame {    background: #fefefe;    border: solid 5px #41403E;    width: 100%;    height: 150px;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    display: flex;    justify-content: center;    align-items: flex-end;}.calc-result-input {    width: 85%;    height: 70px;    text-align: right;    color: #41403E;    overflow: hidden;    font-size: 2rem;
1611480729 148 Aflati proprietatea CSS border radius construind un calculator
Imagine a cadrului de rezultate al calculatorului creat cu CSS mai sus

Logo-ul calculatorului și butonul de alimentare

Următoarele elemente de adăugat la calculatorul nostru sunt sigla, „BLAND INSTRUMENTS” și butonul de alimentare. Vom folosi codul din # demo-patru pentru siglă și codul din # demo-doi pentru butonul de pornire. Arată așa:

.calc-logo {    background: #41403e;    color: #e8eff0;    border: solid px #41403E;    border-radius: 40px 5px;    width: 250px;    height: 50px;    line-height: 50px;    font-weight: bold;    text-align: center;}.calc-on {    border-radius: 50%;    border: none;    background: #bb0f29;    color: #fefefe;    width: 50px;    height: 50px;}
1611480730 566 Aflati proprietatea CSS border radius construind un calculator
Imagine care arată logo-ul calculatorului și butonul de pornire din CSS de mai sus

Butoane Calculator

În continuare vom crea stiluri pentru fiecare buton de calculator. Vom specifica un stil pentru fiecare colț individual, apoi vom furniza două valori pentru fiecare colț. Acest lucru produce un aspect desenat manual de butoane. Iată codul:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    transition: all .5s ease;}
1611480730 522 Aflati proprietatea CSS border radius construind un calculator
Imagine care arată butoanele calculatorului folosind CSS de mai sus

Butonul Enter

Ultimul lucru pe care trebuie să-l adăugăm la calculatorul nostru este ENTER buton. Vom folosi codul de la # demo-one pentru acest buton. Iată codul:

.calc-enter {    background: #bb0f29;    color: #fefefe;    border-radius: 20px;    border: none;}
1611480730 793 Aflati proprietatea CSS border radius construind un calculator
Imaginea care arată butoanele de introducere a calculatorului din CSS de mai sus

Animație buton

Ultimul lucru pe care îl vom adăuga la calculatorul nostru este animația pentru fiecare buton atunci când un utilizator trece deasupra butonului. Aceasta simulează acțiunea butonului care este efectiv apăsat.

Pentru a realiza acest lucru, vom adăuga o umbră de casetă butoanelor noastre. Aceasta este umbra care va fi afișată pentru toate butoanele și oferă butoanelor aspectul de a fi ușor ridicate din cadrul calculatorului.

Pentru a furniza animația, vom adăuga o tranziție la buton. Apoi vom furniza o altă cutie-umbră pentru butoane atunci când un utilizator trece deasupra lor. Iată codul:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);    transition: all .5s ease;}.calc-btn:hover {    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);}

Și iată calculatorul nostru terminat:

1611480731 822 Aflati proprietatea CSS border radius construind un calculator
Imagine care arată animația butonului calculatorului din CSS de mai sus

Obțineți codul

Dacă doriți să vedeți codul complet al calculatorului, îl puteți obține de la Repo GitHub aici. Vă rugăm să stocați repo-ul meu când primiți codul!

Codul folosește Flexbox pentru aspectul calculatorului. Dacă nu sunteți familiarizat cu Flexbox sau doriți să îl examinați, puteți consulta cursul meu gratuit de formare pe Flexbox pe in5days.tech.

Mulțumesc pentru lectură

Vă mulțumesc că ați citit articolul meu. Dacă vă place, faceți clic pe pictograma clap de mai jos pentru ca alții să găsească acest articol.

Iată mai multe articole pe care le-ați putea găsi interesante:

Iată 5 machete pe care le puteți realiza cu FlexBox
Gândiți-vă în afara cutiei cu forma CSS-out
De ce cultura companiei este importantă pentru cariera dvs. de inginer software