Как сделать элемент круглым на CSS
Содержимое, выходящее за границы контура в clip-path , невидно.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
shape-inside : текст в круге
Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside . Но на момент написания статьи нет поддержки браузерами.
Слово1 да слово2 да слово3 да слово4
текст
Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2
Слово1 да слово2 да слово3 да слово4
текст
Можно нарисовать символ либо картинку в центре круга
текст
radial-gradient в background : круглый фон
Когда нужна круглая фоновая картинка.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
radial-gradient в mask : наложить маску на HTML-элемент
Слово1 да слово2 да слово3 да слово4
текст
SVG в background : фоновое круглое изображение
То, что не поддаётся radial-gradient .
Слово1 да слово2 да слово3 да слово4
текст
- Полукруг CSS
- Надпись по кругу CSS
- Заполняющийся круг CSS
- Треугольник CSS
Сделать из прямоугольного изображение круглое в css
Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
Как сделать круглые изображения?
Превратить изображения в круг и добавить вокруг них рамку.
Решение
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.
Пример 1. Круглые изображения
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения 
Результат данного примера в Opera показан на рис. 1.
Рис. 1. Круглые изображения
Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).
Рис. 2. Рамка в браузере Chrome
Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.
Пример 2. Рамка из тени
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения
Результат данного примера показан на рис. 3.
Рис. 3. Рамка в браузере Chrome
Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .
Круглое изображение CSS
Чтобы сделать круглое изображение с помощью CSS можно использовать свойство border-radius со значением 50%, можно поставить значение меньше, если на сайте такая задумка и просто сделать мягкие углы у изображения. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее.
Пример
HTML
CSS
.circle < border-radius: 50%; /* Скругление углов изображения */ border: 5px solid #fff; /* Цвет и ширину рамки */ box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */ >
Для того чтобы получить круглое изображение, размеры картинки должны быть такими, чтобы она изначально была квадратной, если картинка прямоугольная, то получится овал как на примере ниже.
Поиск
Генераторы CSS
- Генератор цвета HTML
- Генератор градиента CSS
- Генератор тени CSS (box-shadow)
- Генератор тени для текста CSS (text-shadow)
- Генератор закругления углов CSS (border-radius)
- Генератор границ блока CSS (border)
- Генератор смещения границ блока CSS (outline)
- Генератор кнопки CSS (button)
- Генератор градиента для текста CSS
- Генератор поворота элемента CSS
- Генератор подсказки CSS
- Фильтр для картинки CSS
- Генератор input checkbox CSS
- Генератор input radio CSS
Поделиться:
STYLE CSS 2020-2024 г. Политика конфиденциальности 
Все материалы сайта доступны по лицензии Creative Commons «Attribution» («Атрибуция») 4.0 Всемирная, если не указано иное.