Как добавить рамку к изображению?
Установить вокруг изображения рамку заданного цвета и толщины.
Решение
Для добавления рамки вокруг картинки применяется стилевое свойство 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 .
Рамка вокруг изображений
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.
Как изменить цвет рамки вокруг изображения-ссылки?
Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег
хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.
Как убрать рамку вокруг изображений-ссылок?
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Рамка вокруг изображений
Для добавления вокруг изображения цветной рамки применяется стилевое свойство border . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).
Пример 1. Добавление рамки
В данном примере к двум изображениям добавляется класс 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
- Строчные элементы
Как добавить рамку к изображению
Иногда при создании веб-страницы может быть необходимо добавить рамку к изображению без использования Photoshop или других редакторов. CSS поможет с этой задачей, добавляя к изображениям разноцветные рамки любой ширины и длины.
Можно создать обычную рамку вокруг изображения, используя CSS свойства border, padding и background.
1. Создайте HTML
- Сначала создайте элемент с названием класса «frame».
- Укажите элемент в .
- Задайте атрибут alt для изображения.
div img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div>2. Создайте CSS
- Задайте высоту и ширину рамки.
- Укажите стиль, ширину и цвет границы с помощью сокращенного свойства border .
- Задайте фоновый цвет.
- Установите свойство margin со значением «auto» и padding с двумя значениями. Первое значение указывает верхнюю и нижнюю сторону, а второе указывает правую и левую сторону.
- Задайте 100% для ширины и высоты изображения.
.frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; >Пример
html> html> head> title>Заголовок документа title> style> .frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; > style> head> body> div class="frame"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>Если хотите создать круглую рамку для изображения, задайте border-radius со значением 50% для всех сторон границы. Установите border-color, border-style, border-width, согласно вашим требованиям. Не забудьте задать overflow: hidden;, чтобы остальная часть изображения была невидимой.
Пример
html> html> head> title>Заголовок документа title> style> .circle < border-color: #666 #1c87c9; border-image: none; border-radius: 50% 50% 50% 50%; border-style: solid; border-width: 25px; height: 200px; width: 200px; overflow: hidden; > img < height: 100%; width: 100%; > style> head> body> div class="circle"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>Можно получить разные эффекты, меняя свойства border-radius и border-color . Например, если хотите получить квадратную рамку, необходимо для всех сторон задать border-radius 0.
Пример
html> html> head> title>Заголовок документа title> style> .square< height: 200px; width: 200px; border-color: #666 #1c87c9; border-image: none; border-radius: 0 0 0 0; border-style: solid; border-width: 30px; > img < height: 100%; width: 100%; > style> head> body> div class="square"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>Если хотите, чтобы указанные углы были скруглены, задайте border-radius со значением 50px для этих углов. В таком случае измените также width и height в соответствии с размером изображения.
Пример
html> html> head> title>Заголовок документа title> style> .rounded-borders < height: 200px; width: 300px; border-color: #666 #8ebf42; border-image: none; border-radius: 50px 0 50px 0; border-style: solid; border-width: 20px; > img < height: 100%; width: 100%; > style> head> body> div class="rounded-borders"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>Как добавить границы с изображением для рамки?
Возможно также добавить изображение в качестве границы. Для этого существует CSS свойство border-image , которое позволяет указать изображение, которое будет использовано как граница вокруг элемента.
Можно указать, как повторять изображение границы, следующими способами:
- stretch — изображение растягивается таким образом, чтобы заполнить область (значение по умолчанию)
- repeat — изображение повторяется, чтобы заполнить область
- round— изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, масштаб изображения меняется так, чтобы заполнить)
- space — изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, дополнительное пространство распределяется между этими частями)
Пример
html> html> head> title>Заголовок документа title> style> div < width: 80%; height: 300px; margin-bottom: 20px; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat; background-size: cover; > img < width: 30%; height: 30%; > .border-one < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round; > .border-two < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round; > .border-three < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round; > .border-four < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch; > style> head> body> div class="border-one"> div> div class="border-two"> div> div class="border-three" > div> div class="border-four" > div> hr> p>Оригинальное изображение: p> img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border"> body> html>