Orice imagini raster sunt ele însele dreptunghiulare, astfel încât pentru a crea o formă complexă în imagini se aplică transparență sau fundal, care coincide cu fundalul paginii web. Într-adevăr, imaginile rotunde pot fi realizate folosind proprietatea stilului rază-limită. Pentru astfel de imagini, se aplică o margine peste graniță și va fi de asemenea circulară, nu pătrată. Dacă introduceți o imagine circulară în . atunci zona de referință este un cerc.
Pentru a face o imagine rotundă arbitrară, transformați-o mai întâi într-un pătrat și apoi adăugați o proprietate a razei de graniță cu o valoare de 50% în stiluri (exemplul 1). Este mai bine să o setați în procente, astfel încât să nu devenim atașate dimensiunii imaginilor.
Exemplul 1. Imagini rotunde
Rezultatul acestui exemplu este prezentat în Fig. 1.
Fig. 1. Imagini rotunde
raza de graniță se aplică oricărui alt element, astfel încât să putem crea un pătrat gol
Fig. 2. Fotografia lui Shark
Acum setați această fotografie ca fundal pentru clasa rotundă. setați dimensiunile elementului și ajustați scara imaginii (exemplul 2).
Exemplul 2. Element rotund
Rezultatul acestui exemplu este prezentat în Fig. 3. Fundalul este setat implicit în colțul din stânga sus, deplasați-l astfel 70 de pixeli spre stânga, astfel încât rechinul să fie în centrul cercului.
Fig. 3. Imagine rotundă
Articole similare
Trimiteți-le prietenilor: