Creați cercuri și ovale folosind CSS3

Material de fond privind limbajele de programare majore și dispunerea de site-uri.

Tehnica Gata pentru crearea de ambele site-uri dinamice simple și complexe folosind PHP si MySQL.

dezvoltarea de site-uri web sub „cheie“.

Dezvoltarea de site-uri fragmente individuale, sfaturi cu privire la aspectul paginilor web și programare web.

instrument web

magazin web

servicii web

grafica web

Resurse web

Doriți să fiți la curent cu evoluțiile care au loc pe site-ul? Inscrie-te pentru a primi cele mai recente știri și articole.

Uita-te pe Google

Creați cercuri și ovale cu CSS3

Creați un cerc

Din utilizatorii site-ului primește o mulțime de întrebări cu privire la modul de utilizare a capacităților de CSS3 pentru a crea forme geometrice sub forma unui cerc sau un triunghi. Din moment ce am discutat doar problemele de rotunjire colțuri și unul dintre articolele menționate crearea de cercuri si ovale, să continue tema începută și desena cercuri și elipse.

Crearea unui nou document și specificați proprietățile unui cerc, pe care dorim să le atragă. În acest scop, definim câmpul circumferință cu aceleași valori de lățime și înălțime. Pentru dimensiunea câmpului va ajusta automat la blocurile în creștere textului, parametrii am specificați dimensiunea în unități de em în loc de pixeli. Ne indică o valoare border-radius, minimă valoare de jumătate lățime / înălțime.

marja de cerc: 30px 20px;
lățime: 10em;
înălțime: 10em;
frontieră: # 000000 solid 2px;
-Moz-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em;
>

Să ne dea acest bloc proprietate div. Tot cercul este desenat. Rămâne doar să se decora un cerc, oferind fundalul parametrului de proprietate.

Crearea elipsă

Creați un oval sub forma unei elipse, nu este cu mult diferit de a crea un cerc. arc eliptic, în contrast cu arc de cerc, un pic de indreptare. Pentru a seta colțul de rotunjire într-un arc eliptic, introduceți două valori separate printr-o bară oblică, astfel: rază de frontieră: 200px / 100px. (B Safari 3 și 4 utilizate sintaxa non-standard fara slash, iar cele două valori sunt separate printr-un spațiu simplu.). Valorile precedente descriu o curbă eliptică lină se extinde pentru 200 de pixeli pe orizontală, dar numai 100 de pixeli pe verticală. Pentru toate unghiurile, puteți specifica valori diferite.

Marja de elipsă: 30px 20px;
lățime: 200px;
height: 100px;
frontieră: # 000000 solid 2px;
-Moz-border-radius: 200px / 100px;
-webkit-border-radius: 200px / 100px;
border-radius: 200px / 100px;
>

Să ne dea acum proprietatea conține div am creat. Elipsă este gata, acum se poate decora.

Full pagina web de cod sursă cu imagini ale cercului și elipsei

Cerc cu raza de 5em

elipsă

Testați pagina. În browser-ul web va arăta astfel:

Dacă testați pagina în IE8 și sub browser-ul, în loc de un cerc și un oval se va vedea un pătrat și un dreptunghi. Pentru ca acest lucru să fie adus în linie, adăugați următorul cod la stilurile de figuri, pe care le-am examinat în articol Crearea de colturi rotunjite în browser-ul IE nu acceptă standardele CSS3:

Cifrele de pe pagina de web va fi tipul corespunzător, și anume un cerc și o elipsă.