Border image generator css: ?Border Image CSS Code Generator — Easy Image Border

Leave a Comment / Css / By /

Содержание

image | HTML и CSS с примерами кода

Свойство border-image используется для отображения рисованной рамки вокруг элемента.

Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Фон
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис

/* image-source | height | width | repeat */
border-image: url('/images/border. png') 30 30 repeat;
border-image: url('/images/border.png') 30 30 stretch;

Значения

none
Не отображает рисованную рамку, используется установленный стиль границы.
URL
Путь к графическому файлу. Обязательный параметр.

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

<число>
Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.

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

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы.
<проценты>
Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен.
<толщина>
Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис.
stretch
Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat
Повторяет рисунок границы.
round
Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на рисунках.

Значение по-умолчанию:

border-image: none;

Применяется ко всем элементам, за исключением тех, у кого border-collapse задан как collapse

Спецификации

  • CSS Backgrounds and Borders Module Level 3

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

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-image</title>
    <style>
      div {
        border: 30px solid #40c4c8;
        padding: 20px;
        border-image: url(/example/image/bg-image. png) 30
          round round;
      }
    </style>
  </head>
  <body>
    <div>
      Витраж представляет собой композицию сделанную из
      множества цветных стекол обрамлённых проволокой и
      наиболее эффектно смотрится при прохождении через него
      солнечного или искусственного света.
    </div>
  </body>
</html>

Ссылки

  • генератор кода border-image

Разбираемся с border-image из CSS3 — CSS-LIVE

Перевод статьи CSS3 Border-Image Explained с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Одно из самых мощных новых свойств CSS, border-image, которое к тому же ещё и имеет шикарную поддержку, за исключением (а теперь все вместе!) IE10 и более ранних версий. Но, к сожалению, также является одним из самых непонятных и сложных для понимания свойств.

Объяснение того, как работает border-image, возможно, лучше всего проиллюстрировать картинкой.

Во-первых, давайте разберём любую рамку на составляющие: представим золочёную раму для картины, которая разделена на девять «плиток» двумя горизонтальными и двумя вертикальными линиями. На рисунке выше я пометил вертикальные разделительные линии, как V1и V2, а горизонтальные, как h2и h3.

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

Представим, что мы играем в Морской бой и обозначим каждую «плитку», созданную нашими разделительными линиями. К верхнему левому углу мы могли бы обратиться как A1, к правой средней части B3, и т.д. (Средняя часть —

B2 — будет проигнорирована CSS, после того, как мы определим фрагменты для нашего изображения рамки. ) Места размещения фрагментов предопределяют роли для наших «плиток». A3 всегда займет место изображения верхнего правого угла для нашей рамки; C2 будет использоваться для нижнего края, и т.д.

Давайте рассмотрим боковые стороны и верх нашей рамки, поскольку они находятся в довольно специфичных, притом изменчивых, условиях. Когда мы применяем рамку к  HTML-элементу, мы не знаем, какой величины будет бокс. После того, как эти условия применятся к рамке, угловые «плитки» не будут затронуты изменениями размера, но боковые стороны, а также верх и низ определённо изменятся. Нам надо решить, как должны вести себя «плитки», которые там будут размещены: будут ли они повторяться или вытягиваться, если бокс станет больше? Это решение относится к дизайну нашей рамки и поэтому и нам придется обозначить наш выбор при написании CSS.

Наконец, давайте подумаем о линиях, которыми созданы наши плитки: двух горизонтальных и двух вертикальных. Нам нужно сообщить CSS, где будут находиться эти воображаемые разделители, для того, чтобы он применил эту информацию для создания «плиток». Мы могли бы отсчитывать их положение либо в процентах либо в пикселях от углов. (Я бы сказал, что в большинстве случаев второе проще всего, кроме случая с SVG-картинками в качестве изображения рамки).

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

background-color, который я указываю, будет просвечивать насквозь.

Способ, которым измеряется и вносится в объявление позиция разделителей, тоже странен: h3 отмеряется от низа изображения, h2 — от верха, V1— от левого края, а V2 — от правого. Они находятся в объявлении в таком порядке:

border-image: url(image) h2 V2 h3 V1

Как ни странно, когда значения вводятся в виде пикселов, за ними не следует суффикс «px», в отличие от почти всего остального в CSS.

Данное изображение под лицензией Creative Commons (снятое Энни Чартранд) вставлено на страницу при помощи этого кода

<img src="teracotta-statue.jpg" alt="Terracotta Statue" class="frame">

И учитывая верхнее изображение рамки, CSS, который мы могли бы применить к ней, был бы примерно таким:

img.frame {

border-image: url('frame.png') 93 92 87 92;

background-color: #ffe;

}

(Заметьте, что этот код пока ещё не работает: есть ещё несколько вещей, которые нужно добавить).

Есть несколько вариантов того, как будут обрабатываться стороны. stretch именно так и работает, repeat будет повторять «плитки», чтобы уместить их в доступную область, round — это гибрид обоих значений, который старается использовать для сторон полные варианты плиток, но растягивая их там, где необходимо.

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

Большинство источников скажут вам, что размеры, используемые в border-width, должны в точности совпадать с теми, которые используются для позиции фрагментов, т.е.:

border-width: 93px 92px 87px 92px;

Но я обнаружил, что с единственным значением border-width рамка по сути масштабируется:

border-width: 60px;

Помните, что в виде запасного варианта вам также нужна обычная рамка на случай, если изображение для «плиток» не загружается или посетитель использует IE: я бы предложил взять рамку толщиной примерно как плитки и воспользоваться ее преобладающим цветом, возможно, с каким-нибудь малоиспользуемым border-style впридачу.

Итак, полный код для эффекта, который показан в верху этой страницы, выглядит так:

img.frame {
border-image: url('frame.png') 93 92 87 92 stretch stretch; border-color:#f4be52; border-style: inset; border-width: 60px; width: 500px; height: 333px;background-color: #ffe; }

Из-за неизбежного растяжения и деформации, которые должно претерпеть любое изображение, применяемое в border-image, я бы рекомендовал использовать PNG-изображения для рамок, где это возможно. PNG-24 также позволяет делать части плиток прозрачными, что очень важно, если вы используете большие украшения для каждого угла, как в нашем примере с золочённой рамой. Без прозрачности внутренних частей изображения наша рама рискует наложиться на что-нибудь из внутреннего содержимого бокса.

Восхитительно, что box-shadow продолжит работать так, как ожидалось. Конечно, тень отразит контур фигуры CSS-бокса, а не контур самой рамки; если внешняя сторона рамки неправильной формы, то вы могли бы создать реалистичную тень, используя настоящий CSS-фильтр падающей тени или подредактировав растровую картинку в таком редакторе, как PhotoShop.

Я бы также посоветовал использовать направляющие, инструмент «Выделение» и окно «Информация», чтобы измерять фрагменты. Мы делали похожую работу ранее – текст, огибающий фигуру и Семантические CSS3-спрайты (действительно, спецификации свойства clip  и border-image тесно связаны между собой). Ещё как вариант, можно использовать онлайн-инструмент Кевина Декера – «Генератор Border Image», чтобы создать CSS для вашей рамки.

P.S. Это тоже может быть интересно:

border-image | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
11.0+7.0+15.0+10.5+15.0+3.0+3.5+15+2.1+1.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам, за исключением тех, у кого border-collapse задан как collapse
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#border-images

Версии CSS

CSS 1CSS 2CSS 2. 1CSS 3

Описание

Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Синтаксис

border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

Значения

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

Путь к графическому файлу. Обязательный параметр.

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

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

<число>

Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.

Рис. 2. Деление исходного изображения на области

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

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4Поочередно устанавливается размеры верхней, правой, нижней и левой границы.
<проценты>
Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен.
<толщина>
Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис.
stretch
Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat
Повторяет рисунок границы.
round
Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на рис. 3.

stretchrepeatround

Рис. 3. Результат использования параметров stretch, repeat и round

 

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-image</title>
  <style>
   div {
    border: 30px solid #40c4c8;
    padding: 20px;
    -moz-border-image: url(images/bg-image. png) 30 round round;
    -webkit-border-image: url(images/bg-image.png) 30 round round; 
    -o-border-image: url(images/bg-image.png) 30 round round;
    border-image: url(images/bg-image.png) 30 round round;
   }
  </style>
 </head>
 <body>
   <div>Витраж представляет собой композицию сделанную из 
   множества цветных стекол обрамлённых проволокой и наиболее 
   эффектно смотрится при прохождении через него солнечного 
   или искусственного света.</div>
 </body>
</html>

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

Рис. 4. Вид рамки в браузере Chrome

Браузеры

Firefox до версии 15.0 поддерживает свойство -moz-border-image.

Safari, Chrome до версии 15.0, Android и iOS поддерживают свойство -webkit-border-image.

Opera до версии 15.0 поддерживает свойство -o-border-image.

Границы

CSS по теме

  • border-image

Статьи по теме

  • Декоративные рамки

Рецепты CSS

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

❮ Назад Полное руководство по CSS Далее ❯


Пример

Укажите изображение в качестве границы вокруг элемента:

#borderimg {
  border-image: url(border. png) 30 round;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

Свойство border-image является сокращенным свойством для:

  • border-image-source
  • граница-изображение-срез
  • ширина границы изображения
  • граница-изображение-начало
  • граница-изображение-повтор

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

Показать демо ❯

Значение по умолчанию: нет 100% 1 0 растяжение
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект . style.borderImage=»url(border.png) 30 раундов» Попытайся

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

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

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Собственность
граница изображения 16.0
4.0 -вебкит-		 11,0 15,0
3,5 -мунц-		 6.0
3.1 -вебкит-		 15,0
11,0 -о-

Примечание. См. поддержку отдельных браузеров для каждого значения ниже.

Синтаксис CSS

border-image: исходная ширина фрагмента начало повтора |начальный|наследовать;

Значения свойств

Значение Описание Демо
граница-изображение-источник Путь к изображению, которое будет использоваться в качестве рамки Демонстрация ❯
рамка-изображение-срез Как разрезать изображение границы Демонстрация ❯
ширина изображения-границы Ширина рамки изображения Демонстрация ❯
граница-изображение-начало Величина, на которую область изображения границы выходит за рамки рамки Демонстрация ❯
граница-изображение-повтор Следует ли повторять, округлять или растягивать изображение границы Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Различные значения среза полностью меняют внешний вид границы:

#borderimg1 {
  граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  border-image: url(border.png) 50 раундов;
}

#borderimg2 {
 граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  border-image: url(border.png) округление 20%;
}

#borderimg3 {
 граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  border-image: url(border.png) округление до 30 %;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Изображения границ CSS

Справочник по CSS: свойство border-image-outset

Справочник CSS: свойство border-image-repeat

Справочник CSS: свойство border-image-slice

Справочник CSS: свойство border-image-source

Справочник CSS: свойство border-image-width

Ссылка HTML DOM: свойство borderImage

❮ Назад Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

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

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

Элемент имеет атрибут границы, который не используется в HTML5. Поэтому мы рекомендуем вместо этого использовать свойство границы CSS.

  • В разделе создайте элемент и поместите ссылку на изображение, которое следует использовать.
  • Установите имя для изображения с атрибутом alt, который предоставляет информацию об изображении, если пользователь не может его просмотреть по какой-либо причине.
  jpeg" alt="Nature">
  • Добавьте стиль к элементу .
  • Задайте ширину изображения.
  • Задайте ширину, стиль и цвет границы с помощью свойства границы.
 изображение {
  ширина: 270 пикселей;
  граница: 1px сплошной черный;
}

Пример добавления рамки к изображению: 

 

  <голова>
    Название документа
    <стиль>
      картинка {
        ширина: 270 пикселей;
        граница: 1px сплошной черный;
      }
    
  
  <тело>
    Природа

Попробуй сам »

Результат

Чтобы изменить цвет границы, вы можете добавить свойство цвета CSS. Если вы хотите создать двойную рамку, вам нужно добавить свойство padding к стилю вашего изображения.

Пример добавления двойной рамки к изображению: 

 

  <голова>
    Название документа
    <стиль>
      картинка {
        ширина: 650 пикселей;
        отступ: 1px;
        граница: 1px сплошная #021a40;
      }
    
  
  <тело>
     
Пример двойной рамки
 
     jpeg" alt="Природа">

Попробуй сам »

Также можно использовать двойную рамку с другим цветом внутренней границы. Для этого добавьте свойство background-color.

Пример оформления двойной границы изображения: 

 

  <голова>
    Название документа
    <стиль>
      картинка {
        ширина: 650 пикселей;
        отступ: 5px;
        граница: 8px сплошная #999999;
        цвет фона: #e6e6e6;
      }
    
  
  <тело>
    Природа

Попробуй сам »

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

Пример обрамления изображения цветным фоном: 

 

  <голова>
    Название документа
    <стиль>
      . природа {
        фон: #b0afac;
        отступ: 12px;
        граница: 1px сплошная #999;
      }
    
  
  <тело>
    Природа

Попробуй сам »

Также возможно обрамление изображения подписью.

Пример добавления заголовка: 

 

  <голова>
    Название документа
    <стиль>
      .img-кадр-кепка {
        ширина: 200 пикселей;
        фон: #fff;
        отступ: 18px 18px 2px 18px;
        граница: 1px сплошная #999;
      }
      .подпись {
        выравнивание текста: по центру;
        поле сверху: 4px;
        размер шрифта: 12px;
      }
    
  
  <тело>
    <дел>
      Природа
      
Природа

Попробуй сам »

Вы также можете указать границы отдельно. Для этого используйте свойства CSS border-bottom, border-top, border-left и border-right и задайте разные значения ширины для каждого из них. Давайте посмотрим на пример, в котором свойство border-bottom имеет эффект, подобный баннеру.

Пример указания границ отдельно: 

 

  <голова>
    Название документа
    <стиль>
      картинка {
        ширина: 225 пикселей;
        граница: 8px сплошная #ccc;
        нижняя граница: 130px сплошная #ccc;
      }
    
  
  <тело>
    Природа

Попробуй сам »

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