Как да си направите снимка в кръг с помощта на CSS
Tags: CSS, IMG, граничен радиус
В тази статия ще разгледаме как различни браузъри заоблени ъгли при снимките. До факта, че той е бил поставен в кръг.
Сега тя стана много модерен дизайн в сайтове вмъкват не е обикновен правоъгълен изображение, както и техните заоблени ъгли, като по този начин ги прави по-симпатичен.
Ако носите тази идея за дизайн оформление на уеб страница, тя използва граничен радиус собственост по отношение на самото изображение - IMG таг.
Ляво - оригиналното изображение, вдясно - с граничен радиус. 40px;
Както знаете, в зависимост от стойността на имота ни е настроен на кривина, по-често е в цифров вид. И степента на изкривяване зависи от размера на изображението.
Да предположим, че това е начинът, замислена дизайнера и привлече оформление (това е просто един образ):
Имаме тази много оформление и снимка Светлана в добро качество:
Ние се пристъпи към процеса на оформление. Първо се определи разположението на бъдещата страницата:
И сега ние добавяме стилове:
Струва си да се обръща внимание на линията 14, в него ние се граничен радиус, равен на 100%. че напълно кръга ъглите и всеки квадратен изображение се превръща в кръгла.
Резултати примери можете да погледнете демо страница:
Или изтеглете всички примерни файлове:
Най-хубавото е, този метод krossbrauzeren и работи във всички последни версии на браузъри, в това число в IE 9+.
Свързани статии