Скруглённые уголки
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Как сделать блок со скруглёнными уголками через CSS3?
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
Как выделить строку с помощью блока с закруглениями?
На сайте часто возникает необходимость акцентировать внимание на одной строке текста. Это может быть телефон, адрес или заголовок важного сообщения. Главное, чтобы посетители обратили на него внимание. Для этой цели лучше использовать блок с закруглениями, как показали психологические исследования, такое оформление притягивает взгляд чаще, чем обычное прямоугольное.
Как сделать рамку со скругленными уголками?
Для создания рамки вокруг блока используется стилевое свойство border , в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Как добавить скругленные уголки у фотографии фиксированного размера?
Если на сайте применяется группа фотографий одинаковой ширины и высоты, то для них достаточно просто можно установить скругленные уголки. Принцип состоит в том, что поверх каждой фотографии накладывается рисунок, который прячет под собой часть фотографии, образуя тем самым желаемые уголки.
Как сделать блок со скругленными уголками без рисунков?
Скругленные уголки достаточно часто применяются в дизайне, но свойство CSS 3 border-radius поддерживается не всеми браузерами. Поэтому приходится использовать различные ухищрения, чтобы добиться универсального результата. Преимущественно для создания уголков применяются изображения, поэтому интересно будет обойтись без них, только с помощью стилей.
Как создать рамку со скругленными уголками без изображений?
Хотя изображения достаточно успешно применяются для создания скругленных уголков в рамках, стилями порой делать это удобнее. Во-первых, через стили можно легко изменить цвет рамки без редактирования картинок. И, во-вторых, рамки без рисунков всегда отображаются в браузерах одинаково, независимо от того, выключен показ картинок или нет.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать постоянно круглую рамку на css?
Но если поставить заместо 150% символ вопроса(?) картинка получается такая:
Рамка вокруг текста должна быть всегда круглой и эта вещь должна легко выравниваться по центру..
- Вопрос задан более трёх лет назад
- 7851 просмотр
Круглая рамка возле квадратной иконки
Вопрос возможно довольно простой, но тк иконки квадратные не получается сделать круглую рамку возле иконки, надо сделть красную иконку с белым бордером по кругу.
body < background: green; >.fa-circle
Отслеживать
Денис Лебедев
задан 31 авг 2018 в 7:25
Денис Лебедев Денис Лебедев
597 7 7 серебряных знаков 22 22 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот так можно сделать. Сначала задаём рамку для нашег округа тегом border , устанавливаем размер в 2px , задаём сплошуную линияю ( solid ), цвет white . Ставим border-radius:100%; . Закрашиваем весь background-color: red; в красный. И вуаля!
body < background: green; >.fa-circle < width: 20px; height: 20px; color: red; background-color: red; border: 2px solid black; border-radius: 100%; >.fa-circle::before
Отслеживать
ответ дан 31 авг 2018 в 7:42
Jack Shepard Jack Shepard
1,119 2 2 золотых знака 14 14 серебряных знаков 41 41 бронзовый знак
Проблема в том, обратите внимание на форму рамки и иконки, рамка не прилегает полностью
31 авг 2018 в 7:43
@ДенисЛебедев я вас понял, код поменял.
31 авг 2018 в 7:51
Cпасибо, это конечно уже придирки, но можете сделать иконку с одинаковыми сторонами?:D сейчас 17.5 px на 20 px Она просто в положение авто ставит размеры, фиг пойми, как это изменить
Сделать круглую рамку для картинки в CSS
Когда-то давно, один из моих «учителей жизни» сказал одну фразу, про программирование, которая оказалась актуальной не только для программирования, но и, например, для стилизации объекта. Звучала она так: «Тебе не надо знать весь язык программирования, и то, как правильно пишется функция, тебе надо знать, что программа может это сделать, а как именно ей написать, что она должна это сделать, потом найдёшь в Интернете», не дословно конечно, но суть примерно такова.
Вот так я знал, что стилями могу настроить «рамку» изображению, осталось только сделать, приступим. Для начала возьмём фотографию за «основу», я для примера взял этого голубя:
Мой код вставки сейчас выглядит так:
И здесь в style (я этого делать не стал), можно добавить ширину изображения, например, у меня «по умолчанию» голубь 500х500, а в Вашем случае, это может быть слишком много и тогда, можно сделать width:300px; опять же, если этого требует ситуация.
Текущее изображение квадратное, его конечно же можно «обрезать», например, в Adobe Photoshop, но так как речь идёт о работе в CSS, то начнём с того, что сделаем изображение «круглым», для этого добавим border-radius в style:
Теперь дело за «рамкой», её можно сделать при помощи теней, в таком случае наши стили станут выглядеть так:
Иногда ситуация требует вмешательства отступов, это всё решается путём «margin»’а (margin, margin-top, margin-left, margin-right, margin-bottom).