Закругленные края для фото
У меня есть карусель с разными фотографиями — разной высоты. Мне нужно сделать так, чтобы фото было с закругленными краями. Как это можно сделать? То, как есть сейчас — скриншот ниже.
Отслеживать
задан 11 сен 2018 в 13:16
291 2 2 серебряных знака 12 12 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Уберите поля у изображений и используйте border-radius: 5px;
Отслеживать
ответ дан 11 сен 2018 в 14:14
vladimirch vladimirch
681 5 5 серебряных знаков 21 21 бронзовый знак
Надо прописать в коде: style border-radius: 5px; . Можно также 5% , но это уж грубо.
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 11 сен 2018 в 13:21
pavel sekishov pavel sekishov
39 5 5 бронзовых знаков
Он закруглит тогда по синему фону, а мне нужно image
11 сен 2018 в 13:31
@Валерий а зачем вы изображения с полями вставляете?
11 сен 2018 в 14:13
Я вижу два варианта:
1. Заполнять пространство картинкой
Для img выставить свойства
2. Не заполнять
Добавить блок, который будет подстраиваться под высоту картинки.
.block_img < max-width: 100%; max-height: 100%; border-radius: 5px; overflow: hidden; >$('.block_img').each(function()< var imgHeight = $(this).find('img').height(); $(this).height(imgHeight); >); Отслеживать
ответ дан 11 сен 2018 в 16:11
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Скруглить Углы для Фото
Этот простой инструмент позволит вам быстро скруглить углы любому изображению. Для этого вам нужно настроить радиус скругления углов и выбрать цвет фона, либо оставить фон прозрачным.
Другие инструменты для фото
Создавай Коллажи из Фото
Создавайте коллажи с большим выбором шаблонов и используйте расширенные настройки, чтобы настроить дизайн. Процесс создания коллажа очень простой: просто загрузите фото в готовый шаблон, поменяйте их местами если это потребуется, настройте цвет рамки или добавьте фон, также опционально вы можете добавить текст или клипарт к коллажу.
Изменить Размер Фото
Этот простой редактор поможет тебе быстро изменить размер фото под нужную ширину и высоту с сохранением пропорций. Этот инструмент будет полезен, если вы хотите уменьшить или увеличить размер фото до определенного количества пикселей по ширине или высоте.
Обрезать Фото Онлайн
Нужно обрезать фото? Легко! Воспользуйтесь нашим редактором, который поможет быстро обрезать фото в нужной области. Вы также можете выбрать из списка пропорции обрезки, например, фото 3х4 или обложка Youtube, это сделает обрезку максимально точным.
Отразить и Повернуть Фото
Нужно быстро зеркально отразить фото? Тогда воспользуйтесь нашим простым редактором, который поможет вам быстро отразить фото вертикально или горизонтально, а также повернуть фото вправо или влево.
Размыть Фото Онлайн
Нужно сделать фон или фото в размытом стиле? Тогда этот редактор поможет вам это реализовать это очень быстро и качественно. Просто загрузите фото и настройте глубину резкости размытия и через мгновение вы получите размытое фото. Этот инструмент будет полезен, если вам нужно сделать размытый фон или просто обработать фото.
Фото Фильтры и Эффекты
Этот редактор имеет большой набор фото фильтров и эффектов, которые придадут вашему фото особый стиль. Используя этот инструмент, вы можете получить ретро фото стиле начала 20-го века или сделать яркое фото в стиле диско с цветными градиентами и еще сотни вариантов дизайна!
Добавить Рамку для Фото
Воспользуйся большим набором красивых фоторамок, чтобы сделать ваше фото в уникальном стиле. Чтобы добавить рамку к фото, просто откройте редактор и выберите понравившийся вариант рамки из списка (например рамка в стиле винтаж или гранж) или вы можете просто добавьте цветную обводку к фото.
Арт Фильтры для Фото
Этот удивительный инструмент на основе нейронных сетей, позволит вам за несколько секунд, трансформировать ваше фото в картину известного художника. Эти фильтры имеют разные художественные стили и основаны на картинах известных художников, так что не упустите шанс стать еще ближе к искусству!
Красивые Текстуры для Фото
Наш фоторедактор имеет десятки необычных текстур, которые можно наложить на фото и настроить уровень прозрачности. Все текстуры отсортированы по категориям, поэтому вам будет легко выбрать самый оптимальный вариант для вашего фото.
Добавить Текст на Фото
Этот инструмент будет полезен, если вам нужно быстро добавить к фото один или несколько текстов. Воспользуйтесь большим выбором разнообразных шрифтов, которые отразят настроение ваших слов лучше всего. Чтобы начать, просто загрузите фото в редактор и выберите шрифт из списка, введите текст и настройте его цвет и размер.
Добавить Клипарт к Фото
Этот инструмент сделает настроение для любой фотографии или изображения. Выберите подходящий стикер из сотен видов клипарта и добавьте к своему фото одним кликом. Перетаскивайте стикеры внутри фото и настраивайте их по своему желанию.
Эффект Виньетки для Фото
С этим инструментом вы сможете быстро добавить виньетку к фото и настроить параметры яркости и насыщенности. Виньетка делает края фотографии немного затемненными и увеличивает визуальный фокус центра фото.
Тилт Шифт Эффект для Фото
Хочешь сделать эффект Тилт Шифт для фото? Попробуй инструмент Tilt Shift от нашего бесплатного фоторедактор, который позволяет быстро настроить величину фокуса и глубину размытия изображения. Вам больше не нужно скачивать дополнительные программы, чтобы добиться эффекта Тилт Шифт.
- Fotoramio
- Скруглить углы фото
Как в css закруглить углы: Скруглённые уголки | htmlbook.ru – Закругление углов в CSS и HTML. Закругление углов картинок
Закругленные углы в CSS. Как закруглить углы изображения на CSS без Фотошопа
Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.
Вот чем я люблю фотошоп, так это тем, что во многих случаях одно и тоже дело можно сделать несколькими способами. Так и здесь. Давайте приступим к нашему фотошопству.
Сглаживание с использованием границ
Этот способ похож на предыдущий, но всё же сильно отличается. Проделывать всё будем с тем же самым изображением.
С помощью создания фигуры
Вот третий способ уже кардинально отличается от двух предыдущих. Так что передохните пару секунд и едем дальше. Изображение менять не буду и опять загружу эту машину в фотошоп.
Вы видите, что у вас в итоге получилось? Картинка стала с загругленными краями, а все из-за того, что она отображается только так, где стоит наш нарисованный закругленный прямоугольник. Но теперь вы можете обрезать лишний фо с помощтю инструмента»Рамка», либо же сразу сохранить картинку и у вас уже будет отдельное изображение с закругленными углами.
Попробуйте проделать все сами, а заодно и скажете, какой из представленных способов болле предпочтителен вам.
И кстати, если у вас есть пробелы в фотошопе или вы его просто хотите полностью изучить в кратчайшие сроки, то очень рекомендую вам посмотреть один замечательный курс по фотошопу для начинающих . Курс отлично сделан, рассказано и показано всё просто великолепно и каждый материал разбирается очень подробно.
Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.
С уважением, Дмитрий Костин
CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.
Закруглённые углы и рамки-изображения
1. Закругление углов с помощью border-radius
Поддержка браузерами
IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44
Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса . Радиус распространяется на весь фон, даже если элемент не имеет границ, точное
Css закругление углов div. Как закруглить углы в CSS и HTML. Закругление углов картинок
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Меня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Эллиптические уголки Вы сами себе учитель
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Приветствую, Друзья. Данная статья посвящена довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS . Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.
В данном способе есть, как плюсы, так и минусы. Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а
Css закругленные. Как закруглить углы в CSS и HTML. Закругление углов картинок
Скругленные углы на фотографии выглядят достаточно интересно и привлекательно. Чаще всего такие изображения применяются при составлении коллажей или создании презентаций. Также картинки со скругленными углами можно использовать в качестве миниатюр к постам на сайте.
Вариантов использования много, а способ (правильный) получить такое фото всего один. В этом уроке я покажу, как скруглить углы в Фотошопе.
Открываем в Фотошопе фотографию, которую собираемся редактировать.
Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J .
Копия создается для того, чтобы оставить нетронутым исходное изображение. Если (вдруг) что-то пойдет не так, можно будет удалить неудачные слои и начать заново.
В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей.
Я задам значение в 30 пикселей, так будет лучше видно результат.
Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.
Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .
Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» Посмотрите скрин, там указано, где данная функция находится.
Функция заставляет объекты автоматически «Прилипать» к вспомогательным элементам и границам холста.
Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).
Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки.
Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой .
Как сделать закругленные углы в CSS
Для закругления углов используется атриб
Как закруглить углы на изображении в фотошопе? Как закруглить углы в CSS и HTML. Закругление углов картинок
Приветствую, Друзья. Данная статья посвящена довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS . Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.
В данном способе есть, как плюсы, так и минусы. Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.
Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.
Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.
Скругленные углы с помощью CSS.
Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:
Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится .
А вот так мы увидим его в веб-браузере:
Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border). Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать. Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее. Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:
Тогда элемент станет выглядеть так:
Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться
Как закруглить края в html. Как закруглить углы в CSS и HTML. Закругление углов картинок. Закругление углов у картинок
Закругленные углы в CSS можно сделать многими способами, очень многими, причем некоторые из них можно считать уже устаревшими, так как в CSS 3 появились новые свойства, позволяющие закруглять углы у HTML-элементов. Однако, во-первых, старые браузеры не поддерживают эти свойства, а во-вторых, в креативном мозгу дизайнера порой рождаются такие идеи, что только старые способы и спасают. Поэтому здесь мы рассмотрим несколько различных вариантов позволяющих сверстать закругленные углы в CSS: от самых простых — до довольно сложных.
В данных примерах углы закругляются у изначально блочных элементов, также в некоторых примерах эти блоки задействуются в качестве вспомогательных элементов. Но помните, что вы с легкостью можете проделать то же самое и с элементами уровня строки, предварительно задав им со значением block или inline-block, если это необходимо.
Закругленные углы в CSS 3 без изображений
В этом примере используются свойства из CSS 3, которые позволяют без проблем закруглять углы без помощи изображений.
Пример HTML и CSS: закругление углов с помощью CSS 3 без изображений
сайт — Закругляем углы на CSS 3 без использования изображений
Описание примера
- Для закругления углов используем свойство CSS 3 , которое понимают все современные браузеры.
- Для старых браузеров Firefox, Chrome и Safari применяем специальные свойства с префиксами -moz- и -webkit- , которые появились у них еще до поддержки основного свойства. К сожалению, для старых Opera и IE нет подобных аналогов. Обратите внимание, что при создании сложных закруглений, свойства с приставками могут не совсем правильно работать. Именно поэтому в CSS-коде они были указаны выше, чем основное свойство, чтобы согласно приоритетов стилей , браузеры, которые уже понимают «чистый» , использовали именно его.
Свойства с префиксами отсутствуют в спецификации CSS, поэтому их использование приведет к невалидному коду.
Закругленные углы в CSS без изображений
В этом примере тоже нет изображений, однако используются дополнительные блоки. Суть метода состоит в том, что перед основным содержимым и после него, указывается несколько блоков, которые по мере удаления от него понемногу уменьшаются в ширине с помощью боковых внешних полей. Благодаря этому и происходит имитация закругления углов.
Данный способ плох тем, что код «замусоривается» дополнительными блоками, но, к сожалению, во многих примерах подобные блоки будут присутствовать. Еще один минус — при больших радиусах закругления придется добавлять еще больше блоков, чем используется в примере.
Пример HTML и CSS: закругление углов без использования изображений
сайт — Закругляем углы в CSS без изображений
Описание примера
- Внутри блока с указываем элемент для основного содержимого («content_block» ) перед которым ставим блоки для имитации закругления углов («b1» , «b2» , «b3» ). После него мы ставим их же, но в обратной последовательности.
- Задаем блокам для им
Какое закругление. Как закруглить углы в CSS и HTML. Закругление углов картинок
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div | Радиус скругления для всех уголков сразу. | |
| div | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Меня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Эллиптические уголки Вы сами себе учитель
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.
Как закруглить углы: свойство CSS3 border-radius
Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:
Стиль, описанный выше, даст следующий результат на элементе
размером 200×200 пикселей:
Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:
BorderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; >.borderElement1 < background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; >
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:
BorderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; >
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:
- border-top-left-radius — для верхнего левого угла;
- border-top-right-radius — для верхнего правого угла;
- border-bottom-left-radius — для нижнего левого угла;
- border-bottom-right-radius — для нижнего правого угла.
Принцип скругления углов
На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px:
Свойство CSS border-radius поддерживается всем
Сделать из прямоугольного изображение круглое в css
Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
