Рамка внутри изображения html

Рамка внутри изображения html

Там у меня еще применяется дополнительный CSS, но уже не относится к этому вопросу.

В инете находил материалы через дополнительный див, но у меня так и ничего не получилось. Неужели нету простого способа?

style='outline: 3px solid #FF0000; outline-offset: -3px'

Если я правильно понял вопрос, то потому, что рамка у меня добавляется динамически уже в дальнейшей работе странички, при определенном ответе от сервере. Т.е. до наступления определенного события даже нет рисунков, которые нужно обрамлять и информации какие именно нужно из всех.

Но мне не ко всем .screenshot img нужна эта рамка. Но, скорее я просто не доганяю, что Вы имеете ввиду(

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как убрать рамку вокруг картинки	nechaevnet	HTML и CSS	3	06.07.2014 22:41
Как заставить браузер рисовать рамку вокруг пустой ячейки?	Stilet	HTML и CSS	7	11.09.2012 13:36
Убрать пунктирную рамку вокруг Image	ivan.tiran	Общие вопросы Delphi	3	17.05.2012 20:41
Поворот изображения вокруг своей оси во время движения по кругу вокруг центра	AsaDorius	Помощь студентам	1	15.12.2010 21:57
Как изменить стиль гиперссылки? Нужно убрать рамку вокруг картинки.	GLB	HTML и CSS	5	18.01.2009 19:18

Источник

Рамка в CSS — варианты использования

Не так давно добавление рамок требовало обрезки изображений и длительной настройки CSS . Теперь ситуация изменилась. Несколько строк кода — это все что вам нужно, чтобы украсить изображение сложными рамками. Из этой статьи вы узнаете, как это делается.

Свойства рамки изображения

Общий способ определения стиля рамок заключается в использовании предустановленных значений стилей: dotted , dashed , solid , double , groove , ridge , inset и outset .

Но вы можете пойти еще дальше и установить фоновые изображения для рамок с помощью следующих свойств CSS .

Свойство border-image-source

С помощью этого свойства назначается фоновое изображение для элемента рамки. Принимаемое значение – это URL-адрес изображения:

Также это свойство отлично работает с градиентами CSS :

В браузере это выглядит примерно так:

Если вы установите для этого свойства значение none , или изображение не может быть отображено, то браузер будет использовать значения свойства border-style . Поэтому нужно использовать border-style в качестве запасного варианта.

Изображение, которое вы используете, не обязательно должно совпадать с рамкой по ширине и высоте. CSS установит нужные размеры автоматически.

Свойство border-image-slice

После того как вы выбрали изображение с помощью border-image-source , вы применяете его к рамке, используя свойство border-image-slice :

Это свойство задает внутренние смещения от верхней, правой, нижней и левой стороны. Смещения разделяют изображение на 9 областей: четыре угла, четыре стороны и посередине:

В качестве значения вы можете указать от одного до четырех чисел или проценты. При указании четырех значений они применяются для смещений сверху, справа, снизу и сверху. Если вы пропускаете смещение слева, оно задается таким же, как справа. Если вы пропускаете смещение снизу, оно будет таким же, как сверху. Если вы пропустите значение смещения справа, оно будет установлено таким же, как смещение сверху. Если использовать только одно значение, оно будет использоваться для всех четырех смещений.

Процентные значения обозначают проценты от размеров изображения — ширины изображения для горизонтальных смещений и высоты для вертикальных.

Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.

Вот как вы можете использовать border-image-slice :

.box

Используя для рамки изображение размером 100 на 100 пикселей, которое выглядит следующим образом:

мы получим что-то выглядящее вот так:

Средняя область выводится полностью прозрачной, поэтому она не видна. Если вы хотите сделать ее видимой, добавьте ключевое слово fill .

Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.

Применив ключевое слово fill следующим образом:

с изображением, содержащим в центральной области детализированный контент:

мы получим область с полностью видимым изображением, хотя оно и будет размытым и деформированным:

Свойство border-image-width

Это свойство задает площадь границ рамки. По умолчанию, границы этой области совпадают с границами блока рамки. Так же, как и свойство border-image-slice , border-image-width задает внутренние смещения, которые разделяют изображение на девять областей.

Это свойство принимает до четырех значений ( смещение сверху, справа, снизу и слева ), число или процентное значение.

Проценты задаются относительно области изображения рамки ( по ширине для горизонтальных смещений и высоте для вертикальных смещений ). Если вы используете числа без указания px, это будет приравниваться к умножению соответствующего значения border-width . Например, следующий код:

. устанавливает ширину изображения рамки в три раза больше значения border-width , которое равно 19 пикселям. В результате получится что-то наподобие этого:

Я пришла к выводу, что определение для свойств border-image-width и border-image-slice одинаковых значений обеспечивает наилучшее отображение рисунка рамки без искажений.

Свойство border-image-outset

Рассмотренные нами свойства используются для вставки изображения рамки внутрь блока рамки. Но мы можем сдвинуть область изображения рамки за пределы блока с помощью свойства border-image-outset .

Это свойство принимает до четырех значений ( смещение сверху, справа, снизу, слева ) выражаемых в единицах длины: как пикселях, так и Em. Если вы используете число, изображение рамки будет смещено за пределы границы рамки на величину, кратную значению border-width .

Для большей ясности я нарисовала зеленый пунктирный контур, представляющий границу блока рамки. Область изображения рамки содержит внутри розовое изображение. По умолчанию изображение должно находиться внутри зеленого контура. Это означает, что область изображения рамки размещается внутри блока рамки:

Добавление правила border-image-outset : 19px; приводит к тому, что розовое изображение выводится за пределы зеленого пунктирного контура:

При размещении изображения рамки вне блока рамки, оно не охватывается прокруткой элементов и событиями мыши.

Свойство border-image-repeat

Это свойство предлагает несколько вариантов отображения фонового изображения рамки по сторонам и в средней части рамки. Первое значение применяется к горизонтальным сторонам ( сверху и снизу ), а второе значение к вертикальным ( справа и слева ). Если вы установите только одно значение, оно будет применяться и к горизонтальным, и к вертикальным сторонам.

• stretch — значение по умолчанию, если вы не используете свойство border-image-repeat . Растягивает изображение, чтобы оно заполняло всю доступную площадь;
• repeat — изображение повторяется, чтобы заполнить всю доступную площадь. Изображение может отображаться не полностью, если доступная площадь не может быть заполнена по ширине кратное количество раз;
• round — то же самое, что repeat , но если доступного пространства недостаточно, чтобы вместить копии изображения рамки без обрезки, они растягиваются, пока не будут подогнаны соответственно. Фрагменты плитки никогда не обрезаются, но могут выглядеть немного искаженными;
• space — то же самое, что repeat, но если доступное пространство не может вместить кратное количество копий, оставшееся пустое пространство равномерно распределяется между всеми фрагментами.

На момент написания данной статьи Firefox выводит space так же, как stretch , а Chrome выводит space так же, как repeat .

Свойство border-image

Вы можете использовать все свойства, описанные выше, в свойстве border-image следующим образом:

1. border-image-source ;
2. border-image-slice ;
3. border-image-width ;
4. border-image-outset ;
5. border-image-repeat .

Ниже приводится фрагмент кода:

Поэкспериментируйте с примерами кода свойства border-image-repeat и border-image на странице CodePen .

Что, если я хочу удалить изображение рамки?

Лучший способ сбросить все настройки — использовать свойство border . С помощью него вы можете быстро переустановить одинаковую ширину, цвет и стиль для всех четырех сторон элемента. Вам не нужно указывать правило border-image:none , как и переопределять каждое из отдельных свойств border-image .

Поддержка браузерами

На момент написания данной статьи свойства border-image поддерживаются во всех основных браузерах. Только Firefox не может растягивать SVG-изображения в пределах элемента, а Opera Mini поддерживает сокращенный синтаксис с префиксом -o-, но не отдельные свойства.

Заключение

В этой статье я подробно рассказала о свойстве border-image: значениях, которые оно принимает, о том, как лучше его использовать, и об уровне поддержки браузерами на момент написания статьи.

Более подробную информацию вы можете найти в спецификации CSS Backgrounds and Borders Level 3 .

С нетерпением жду ваших отзывов!

Источник

Рамки и линии CSS/HTML

Рамки и линии всегда присутствуют практически на любом сайте, они помогают визуально разделить контент, подчеркнуть или обратить внимание пользователя на нужные элементы, и придать дизайну уникальность.

Рамка для блока CSS

Простая рамка для блока CSS может пригодится для галереи, для того, чтобы выделить изображение. Также можно воспользоваться генератором рамки для блока, и там настроить все параметры нужной рамки,а затем скопировать результат.

Пример

HTML

CSS

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

CSS

Рамка к изображению при наведении

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

Пример

HTML

CSS

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

Чтобы добавить линию к тексту необходимо задать элементу класс. Такое оформление может пригодиться для цитат, сообщений, предупреждений или передачи какой-то важной информации. Цвет линии и фона можно менять по своему усмотрению. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

Источник