Как сделать круглые углы в css

Кроссбраузерное скругление углов средствами CSS

В общем это то же самое, что предлагает вот этот гламурненький сайт border-radius.com . К сожалению, этот способ работает только в вакуумных условиях, — в суровой реальности с вечно живым ИЕ, всё не так просто. А разве кто-то сомневался? Но по крайней мере можно определиться с радиусом скругления.

А вот этот генератор закругленных углов на CSS3 ( aimweb.name/border/ ) уже выглядит несколько серьезнее. Кроме визуального представления еще даются рецепты от головной боли, причиняемой Интернет Эксплорером. Для поддержки скругленных углов в IE, следует использовать Vml-скрипт ( //fetchak.com/ie-css3/ ), подключаемый в CSS.

Ниже приведен код CSS, сгенерированный этим сервисом.

Кроссбраузерный CSS для IE

Если файл ie-css3.htc находится в корне сайта, то в скобках будет указано только его название. Если он лежит в другом месте, например в папке /css/, то соответственно это нужно указать. С этим, думаю, все ясно.

Скругляем углы на фото в Фотошопе

kak-skruglit-uglyi-v-fotoshope

Для достижения результата мы используем один из инструментов группы «Фигуры», а затем просто удалим все лишнее.

    Открываем в Фотошопе фотографию, которую собираемся редактировать.

skruglyaem-uglyi-v-fotoshope-3

В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей. Мы зададим значение в 30 пикселей, так будет лучше видно результат.

skruglyaem-uglyi-v-fotoshope-7

Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку». Посмотрите скриншот, там указано, где данная функция находится. Она заставляет объекты автоматически «прилипать» к вспомогательным элементам и границам холста.

skruglyaem-uglyi-v-fotoshope-13

Сохраняем получившееся изображение в формате PNG. Только в этом формате есть поддержка прозрачных пикселей.

Результат наших действий:

skruglyaem-uglyi-v-fotoshope-15

Вот и вся работа по скруглению углов в Фотошопе. Прием очень простой и эффективный.

ЗакрытьМы рады, что смогли помочь Вам в решении проблемы.

Помимо этой статьи, на сайте еще 12470 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

ЗакрытьОпишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *