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

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

  • автор:

border — image

Надоели скучные одноцветные рамки? Используйте картинку!

Время чтения: 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Это свойство позволяет использовать картинку в качестве «заливки» рамки.

Пример

Скопировать ссылку «Пример» Скопировано

   Выход
за
рамки
div class="element"> span>Выходbr>заbr>рамкиspan> div>
 .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch;> .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В примере выше специально сделана разорванная рамка. Становится хорошо видно, как браузер поступает с изначальной картинкой рамки. Он делит её на девять частей:

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

После двоеточия значения указываются в следующем порядке:

 .selector  border-image: источник фрагмент ИЛИ процент [/ ширина ] повторение;> .selector  border-image: источник фрагмент ИЛИ процент1,4> [/ ширина 1,4>] повторение0,2>; >      

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

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

Источник

Скопировать ссылку «Источник» Скопировано

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

 .selector  border-image: url(border.png);> .selector  border-image: url(border.png); >      

Картинка может быть в любом формате. В том числе в SVG.

Можно использовать отдельное свойство border — image — source .

Фрагмент

Скопировать ссылку «Фрагмент» Скопировано

Размер одного фрагмента в пикселях. Важный момент: единицы измерения не пишутся, указывается только число. Например, если нужны фрагменты по 10 пикселей, то пишем:

 .selector  border-image: url(border.png) 10;> .selector  border-image: url(border.png) 10; >      

Значение может быть указано в процентах:

 .selector  border-image: url(border.png) 50%;> .selector  border-image: url(border.png) 50%; >      

Значение по умолчанию — 100 % .

Можно указать от одного до четырёх числовых или процентных значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border — image — slice .

Ширина

Скопировать ссылку «Ширина» Скопировано

Необязательное значение. Но обратите внимание на два момента:

  1. Для отображения рамки её ширина должна быть указана либо в свойстве border , либо в свойстве border — image . Если ширина рамки нигде не указана, то рамка не отображается.
  2. Если указываете ширину в свойстве border — image , то её значение отделяется от предыдущих слэшем / .
 .selector  border-image: url(border.png) 50% / 10px;> .selector  border-image: url(border.png) 50% / 10px; >      

При указании ширины нужно указать единицы измерения.

Можно задать от одного до четырёх значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border — image — width .

Повторение

Скопировать ссылку «Повторение» Скопировано

Описывает при помощи ключевых слов, как именно браузер должен поступить с фрагментами при создании рамки.

Ключевые слова, которые можно задать:

  • stretch — значение по умолчанию. Фрагмент рамки растягивается так, чтобы заполнить промежуток между углами.
  • repeat — фрагменты повторяются до тех пор, пока области между углами не будут заполнены. Фрагмент может быть обрезан.
  • round — браузер повторяет фрагменты для заполнения пространства между углами, но не обрезает их. При этом, если целое число фрагментов не закрывает всю площадь, то они равномерно распределяются, так что возможно появление промежутков между фрагментами.
  • space — фрагменты повторяются, а свободное место, оставшееся после повторения целого количества фрагментов, распределяется равномерно.

Можно указать до двух значений: для горизонтали и для вертикали. Если указать одно значение, то оно применится ко всем сторонам рамки.

По горизонтали будет целое количество фрагментов, а по вертикали будет один фрагмент, растянутый на всю ширину:

 .selector  border-image: url(border.png) 50% / 10px round stretch;> .selector  border-image: url(border.png) 50% / 10px round stretch; >      

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

Центральная часть по умолчанию пустая. Чтобы заполнить её фрагментами, можно задать ключевое слово fill после значения размера фрагмента. Но для этого трюка нужно, чтобы картинка рамки включала в себя центральную часть ��

Фрагментами будет заполнена и центральная часть:

 .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch;> .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch; >      

Можно использовать отдельное свойство border — image — repeat .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Обязательно задаётся ширина рамки. Либо в этом свойстве, либо при помощи шортката border , либо при помощи отдельного свойства border — width .

�� Рамка — стильная штука. Без значения для свойства стиля рамка не покажется. Соответственно, нужно либо указать значение в шорткате border , либо при помощи отдельного свойства border — style .

�� Можно сбросить картинку рамки при помощи ключевого слова none в качестве значения.

�� Помимо картинки, в качестве рамки можно задать градиент.

Для этого вместо url ( ) пишется linear — gradient ( ) либо radial — gradient ( ) . Остальные значения указываются так же, как если бы была указана картинка.

  • Chrome 56, поддерживается 56
  • Edge 12, поддерживается 12
  • Firefox 50, поддерживается 50
  • Safari 9.1, поддерживается 9.1

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Это свойство редко встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба.

Раньше не существовало свойства border — radius , и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде ��

Короче, нам повезло, сейчас попроще.

Как сделать рамку картинке на CSS?

Не знаю как реализовать рамку к картинке. Она находится за изображением, а нужно на переднем плане. Нужно как то реализовать без позиционирования. Как это сделать?

Рамка такого вида

.img-border < background: url('/1.png') no-repeat 100% 100%, url('/2.png') no-repeat 0 100%, url('/3.png') repeat-x 0 100%, . N repeat; >
  • Вопрос задан более трёх лет назад
  • 2571 просмотр

Комментировать
Решения вопроса 0
Ответы на вопрос 3
псевдоэлементы :before и :after не пробовали использовать?
Ответ написан более трёх лет назад

By_Engine

Дмитрий @By_Engine Автор вопроса
не работает

black_wolf1894

Тимофей Белоусов @black_wolf1894
Дмитрий: а вы не пробовали картинке задать свойство блока или инлайн-блока?

.img-border

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Вадим Белкин @BelkinVadim
Frontend разработчик
Если рамку вы делаете посредством фоновых картинок,

.img-border < background: url('/1.png') no-repeat 100% 100%, url('/2.png') no-repeat 0 100%, url('/3.png') repeat-x 0 100%, . N repeat; >

То доп.элементами поверх картинки можно, а проще как посоветовал archelon, через псевдоэлементы.
Через position: absolute растяните по контейнеру .img-border, через z-index поместите на передний план поверх изображения.
У .img-border установите position: relative

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • час назад
  • 22 просмотра

Как сделать рамку вокруг изображения через CSS

Здравствуйте, уважаемые читатели. Сегодня рассмотрим вариант изменения дизайна картинок на сайте, а именно, будем делать рамку вокруг изображения при помощи CSS. Прописав необходимый CSS код, можно добиться, чтобы все загружаемые на сайт изображения, имели красивую рамку. Для чего это бывает нужно, спросите вы? К примеру, если вы размещаете на сайте фотографии, то с рамкой они будут смотреться гораздо лучше и красивее. Вместо того, чтобы редактировать каждую отдельно взятую фотографию в графическом редакторе, мы создадим CSS правила и облегчим себе жизнь. ��

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

Телеграм-канал serblog.ru

Я использовал 3 фотографии и сделал к ним разные рамки. Но перед этим задал им размер и необходимые отступы. Это делается для каждого случая индивидуально. В моем примере это выглядит так:

img {height: 300px; margin-left: 45px; width: 200px;}

К картинкам я прописал классы. На первом изображении получилась белая рамка размеров 10 пикселей и скругленными углами радиусом 10 пикселей. А так же, для разнообразия, я добавил ко всем изображениям псевдокласс hover, чтобы были видны изменения при наведении курсора и CSS3 тень. Тень кстати, вы сможете увидеть не во всех браузерах. Весь CSS код выглядит вот так:

1 2 3 4 5 6
.one{border: 10px solid #FFF;border-radius: 10px; box-shadow: 2px 3px 8px -2px;} .one:hover{box-shadow:none; border-color: #adffcc;} .two{border: 10px solid #333; box-shadow: 0 0 8px 1px;} .two:hover{border-color:#666; box-shadow:none;} .three{border: 10px solid #2990FC; border-radius: 10px 0 10px 0; box-shadow: -2px 4px 5px -1px;} .three:hover{box-shadow:none; opacity:0.8;}

Надеюсь теперь вам понятен принцип создания рамки вокруг изображений в CSS. Обратите внимание, что в третьем изображении загруглены только 2 угла, а 2 остались без изменений. А так же меняется его прозрачность при наведении. Если возникнут вопросы по созданию рамок вокруг изображений, можете задавать их в комментариях. Постараюсь вам помочь. И если вам не трудно, поделитесь этой записью в социальных сетях. Спасибо.

Как делается в CSS рамка-картинка?

От автора: Всех приветствую. Наверняка вы знаете о том, что в css можно делать рамку любому элементу. Но знали ли вы, что в качестве рамки может быть не просто сплошной цвет, но и изображение? Сегодня я вам покажу, как делается в css рамка-картинка.

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

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

Неплохо выглядит, да? И хоть пишу я эту статью в августе, впереди осень, а значит рамка вполне себе к месту в нашем случае. Что ж, чтобы попробовать применить нашу рамку к какому-то элементу, нужно его создать, разумеется. Пусть это будет просто несколько абзацев текста.

Сентябрь был очень теплым , даже черезчур теплым . Такое положение вещей не должно
нас удивлять , потому что вот уже несколько лет подряд температура на нашей планете
стремительно повышается .
< p >Еще несколько десятилетий назад такой ситуации не наблюдалось . Например , раньше
летние вечера приносили с собой прохладу , а нынче даже вечером порой никуда не денешься
от невероятной жары . Такая ситуация происходит по всему миру . Дело в парниковом эффекте ,
количество углекислого газа на нашей планете увеличивается . < / p >

Вот так, пусть это будет блок с двумя абзацами. Рамку мы применим как раз к этому блоку.

margin : 30px auto ;
width : 500 ;
border : 50px solid red ;
border — image : url ( leaves . jpg ) 50 ;

Тут нас с вами должны интересовать третья и четвертая строки. Ширину я задал только для того, чтобы блок не растягивался на всю ширину окна и мы могли более наглядно видеть нашу рамку. Итак, сначала покажу результат:

Получилось достаточно симпатично. Ну а теперь я вам объясню, что же нужно для такого отображения:

Указать обычную рамку. То есть ширину, тип и цвет, как будто вы задаете обыкновенную рамку. Это очень важно сделать, без этого наша декоративная рамка показываться не будет!

Прописать непосредственно свойство border-image, где указать путь к картинку с рамкой, а также ширину всех сторон рамки. Я указал одинаково со всех сторон – 50. Очень важно записывать просто число, без пикселей. То есть если вы в border-image напишете 50px, то отобразится просто красная рамка, если не укажете размер вообще, то тоже будет некорректное отображение. Очень важно сделать так, как написано в коде.

Собственно, это все обязательные параметры, которые вы должны прописать для того, чтобы граница отобразилась. В качестве третьего параметра для border-image можно указать тип повторения. По умолчанию, если вы его не укажете, то браузер будет использовать значение stretch, то есть растягивать рисунок границы до размеров элемента, к которому применяется рамка.

Также есть значение repeat, оно заставляет рисунок границ border-а повторяться. Но из-за этого на концах элемента рисунок в очередной раз может поместиться не полностью. Если же вы хотите вместить целое кол-во повторений, используйте значение round, которое тоже повторяет изображение, но при этом делает так, чтобы в рамке использовались только целые повторения.

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

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

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

Также хочу отметить, что к декоративной рамке невозможно применить закругление углов. Проще говоря, свойство border-radius никак не влияет на такую рамку. Единственный вариант получить закругленную рамку – найти в интернете такую изначально и уже ее применять к нужным элементам.

Что ж, я надеюсь, сегодняшняя статья вам помогла и теперь вы имеете в своем арсенале еще одну крайней интересную возможность css3 – декоративные рамки. Область их применения достаточно широка. Например, можно обрамлять ими виджеты и использовать для разного рода декоративных элементов. На этом у меня все, до встречи! Кстати, остальные фишки css3 вы можете изучить в нашей серии уроков по этой технологии. Там и градиенты, и закругление углов, и тени. В общем, полный фарш.

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

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