Hogyan készítsünk egy képet egy kört c CSS segítségével
Címkék: css, img, border-radius
Ebben a cikkben fogjuk megvitatni, hogyan cross-browser lekerekített sarkok a képeket. Akár az a tény, hogy az anyagot egy kört.
Most lett nagyon divatos design oldalak ki nem egy közönséges négyszögletes képet, és a sarkokat, ezáltal növelve azok szerethető.
Ha magánál ezt az ötletet az elrendezés tervezés egy weboldalon, akkor az border-radius tulajdonság vonatkozásában maga a kép - a címke img.
Balra - az eredeti kép, jobbra - a border-radius. 40px;
Mint tudja, az értéke a tulajdonság értéke görbület, gyakrabban van numerikus. És a görbület mértéke attól függ, hogy a kép méretét.
Tegyük fel, hogy ez mennyire a tervező fogant, és vett egy elrendezést (ez csak egy kép):
Van ez a nagyon elrendezés és fotó Svetlana jó minőségben:
Mi jár az elrendezés folyamat. Először meghatározzuk az elrendezés a jövőben az oldalon:
És most add stílusok:
Érdemes odafigyelni, hogy a 14. sor, benne mi meg border-radius 100% -kal egyenlő. hogy teljesen lekerekíti és bármely négyzet alakú képet alakítunk át egy kör alakú.
Eredmény példák akkor nézd meg a demo oldalon:
Vagy letöltheti az összes fájlt a minta:
A legjobb az egészben, ez a módszer krossbrauzeren és dolgozik minden újabb változatai böngészők, beleértve az IE 9.