Как сделать рамку в css вокруг картинки
Перейти к содержимому

Как сделать рамку в css вокруг картинки

  • автор:

Рамка вокруг изображений

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).

Пример 1. Добавление рамки

Изображения .border

В данном примере к двум изображениям добавляется класс border , через который устанавливается зелёная рамка (рис. 1).

Рамка вокруг фотографий

Рис. 1. Рамка вокруг фотографий

Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover . Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.

Пример 2. Рамка вокруг изображений

Изображения

Другой способ добавления рамки — использование свойства outline . Оно, в отличие от border , не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.

img:hover < outline: 3px solid #00af64; /* Цветная рамка */ >

Несмотря на схожесть этих свойств, у них есть небольшие различия:

  • outline выводится вокруг элемента ( border внутри);
  • outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Ещё один способ создания рамки заключается в добавлении фона к . Сам фон сразу не виден, поэтому надо установить ещё свойство padding , его значением выступает толщина рамки (пример 3).

Пример 3. Использование background и padding

Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding , border , outline и background можно сделать множество самых разнообразных рамок.

См. также

  • border
  • Блочные элементы
  • Добавление треугольника
  • Колесо для сокращённых свойств
  • Открываем блочную модель
  • Оформление ссылок
  • Повёрнутые рамки
  • Свойство border
  • Строчные элементы

Как добавить рамку к изображению?

Установить вокруг изображения рамку заданного цвета и толщины.

Решение

Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавить к селектору IMG . В качестве значения одновременно указывается толщина границы, её стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать img . В примере 1 приведен полный код для добавления рамки к изображениям на странице.

Пример 1. Добавление рамки

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Винни-Пух img  

Результат данного примера показан на рис. 1.

Изображение с рамкой

Рис. 1. Изображение с рамкой

В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных тегов (пример 2).

Пример 2. Добавление рамки к избранным рисункам

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Винни-Пух .frame 

В данном примере введён стилевой класс frame , который добавляется к выбранным рисункам с помощью атрибута class .

Как сделать такую рамку вокруг картинки?

alt text

Как сделать такую рамку вокруг картинки?

Отслеживать
задан 7 мар 2015 в 23:00
7 мар 2015 в 23:04

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

img.rounded < border-radius: 100px; /* половина длины картинки */ border: 5px solid #3333cc; /* например */ >

Картинка (или контейнер) — квадрат

Отслеживать
ответ дан 7 мар 2015 в 23:14
525 3 3 серебряных знака 11 11 бронзовых знаков
@densmith если поставить border-radius половину длины картинки, то рамка не круглая.
8 мар 2015 в 0:25
для этого необходимо ставить border-radius: 50% or добавить половину border
8 мар 2015 в 4:04
8 мар 2015 в 4:11

@soledar10 я вижу, что Ваш пример прекрасно работает. Но у меня почему-то рамка не становиться как положено! dental2.brandivo.com

8 мар 2015 в 9:46
вы задаете контейнеру border, а необходимо img — т.е там контейнер и не нужен
8 мар 2015 в 10:03

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как сделать рамку в css вокруг картинки

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-02-2024! ��

Рамка картинки через атрибут border

Для того, чтобы сделать рамку картинки нам потребуется:

Нам нужна картинка, вернее код картинки вместе с адресом :

Это будет выглядеть так:

пример отсутствия рамки

Далее добавляем вовнутрь атрибут border со значением 1.

Получаем рамку вокруг картинки :

Пример рамки картинки через атрибут border

Пример раки картинки

Рамка картинки через style css

Следующим пунктом сделаем рамку картинки через css

Как вы знаете, что свойства для элемента можно прописать тремя способами, они используются в зависимости от локальности свойств(1 элемент, страница, весь сайт):

Не будем рассматривать все пункты- вы сможете сами потренироваться!

Выберем требуемый инструмент в данной ситуации — это style.

Создаем какой-то селектор — пусть это будет class,

толщина рамки : «1px»

.ramka_kartinki_css
Во внутрь картинки помещаем наш класс:

Соберем весь код рамки картинки вместе:

Пример рамки картинки через css:

пример рамки картинки через css

Если требуется сделать отступ между рамкой и картинкой, добавляем padding

пример рамки картинки через css с зазором

Результат:

Тень для рамки картинки

Для того, чтобы создать тень для рамки картинки нам понадобится пройти весь dwit описанный путь,

или просто взять скопировать код рамки из выше описанного пункта:

.ramka_kartinki_css_2

И добавим в стили, тень для рамки, вы можете поиграться с цифровыми значениями тени рамки картинки:

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22)
.ramka_kartinki_css_2

Html :

В коде html меняем название класса :

Соберем весь код вместе:

Пример тени рамки картинки

пример рамки картинки через css с зазором

При наведении на картинку рамка исчезает css

Как сделать так. чтобы при наведении на картинку, рамка исчезала!?

Для этого нам понадобится hover.

img.ramka_kartinki_css_3:hover < border: unset; >

И получаем результат, что наша картинка будет дергаться при исчезновении рамки. Поэтому, когда вам требуется убрать рамку, то всегда делайте рамку прозрачной а не убивайте её! Если вы примените вместо «unset» — «none» результат будет аналогичный!

Пример исчезновения рамки через unset:

исчезновение рамки с помощью unset

Плавное исчезновение и появление рамки на картинке:

Добавим в hover :

border: 1px solid transparent;

transition: all 0.5s linear 0.5s;

transition: all 0.5s linear 0.5s;

border: 1px solid black; padding: 4px;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22);

border: 1px solid transparent;

transition: all 0.5s linear 0.5s;

Пример плавного исчезновения и появления рамки картинки:

Не стесняемся говорить спасибо!

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

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

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