Border img: border-image-source — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

border-image | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

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

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

Синтаксис 

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

Обозначения

Описание		Пример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным. inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

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

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

<число>

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

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

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

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

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

stretchrepeatround

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

Пример

<!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>

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

Рис. 4. Вид рамки

Объектная модель

Объект.style.borderImage

Примечание

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

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

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

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

111271610.515363.515
2.14. 43.51511163.26

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Границы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Border Images Изображения границ CSS уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Изображения границ CSS

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

CSS граница-свойство изображения

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

Недвижимость имеет три части:

  1. Изображение, используемое в качестве границы
  2. Где разрезать изображение
  3. Определите, должны ли средние сечения повторяться или растягиваться

Мы будем использовать следующее изображение (под названием «border.png»):

Свойство border-image принимает изображение и нарезает его на девять секций, например, на доске Tic-Tac-Toe. Затем он помещает углы по углам, а средние секции повторяются или растягиваются, как вы укажете.

Примечание: Для работы border-image элементу также требуется набор свойств border!

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

Изображение как граница!

Вот код:

Пример

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border. png) 30 round;
}

Здесь, средние участки изображения растягиваются, чтобы создать границу:

Изображение как граница!

Вот код:

Пример

#borderimg {
    border: 10px solid transparent;

    padding: 15px;
    border-image: url(border.png) 30 stretch;
}

Совет: Свойство border-image фактически является сокращенным свойством для свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

Граница CSS-изображение-различные значения среза

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

Пример 1:

border-image: url(border.png) 50 round;

Пример 2:

border-image: url(border.png) 20% round;

Пример 3:

border-image: url(border.png) 30% round;

Вот код:

Пример

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.

png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30% round;
}

Свойства изображения границы CSS

СвойствоОписание
border-imageСокращенное свойство для установки всех свойств Border-Image-*
border-image-sourceУказывает путь к изображению, которое будет использоваться в качестве границы
border-image-sliceОпределяет способ среза изображения границы
border-image-widthЗадает ширину изображения границы
border-image-outsetОпределяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeatУказывает, должно ли изображение границы повторяться, округляться или растягиваться

❮ Назад Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

изображений границ CSS3 | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Изображения границ CSS3

— CR

  • Глобальное использование
    97,03% + 2,75% знак равно 99,78%

Метод использования изображений для границ

Chrome
  1. 4–14: Частичная поддержка
  2. 15 — 29: Частичная поддержка
  3. 30 — 50: Частичная поддержка
  4. 51 — 55: Частичная поддержка
  5. 56 — 106: Поддержано
  6. 64% — Supported»> 107: Поддерживается
  7. 108 — 110: поддержано
8.
  • 041491414141414141414141414141414141414141414141414141414141414141414141414141414141414141414114141414914141411414141411414.
  • — 110: 110: 12 — 13: Supported
  • 14 — 106: Supported
  • 107: Supported
    • Safari
    1. 3.1 — 5.1: Partial support
    2. 6 — 9: Partial support
    3. 9.1 — 15.3: Supported
    4. 15.4 — 16.0 : Поддерживается
    5. 16. 1: Supported
    6. 16.2 — TP: Supported
    Firefox
    1. 2 — 3: Not supported
    2. 3.5 — 14: Partial support
    3. 15 — 49: Partial support
    4. 50 — 105: Supported
    5. 106: Поддержано
    6. 107 — 108: Поддерживается
    Opera
    1. 9 — 10.1: не поддерживается
    2. 10,5 — 10,6: частичная поддержка
    3. 0052 38 — 42: Partial support
    4. 43 — 91: Supported
    5. 00% — Supported»> 92: Supported
    IE
    1. 5.5 — 10: Not supported
    2. 11: Supported
    Chrome for Android
    1. 107: Supported
    Safari on iOS
    1. 3.2 — 5.1: Partial support
    2. 6 — 9.2: Partial support
    3. 9.3 — 15.3: Supported
    4. 15.4 — 16.0: Supported
    5. 16.1: Supported
    Samsung Internet
    1. 4: Partial support
    2. 5 — 6.4: Partial support
    3. 67% — Supported»> 7.2 — 18.0: Supported
    4. 19.0: Supported
    Opera Mini
    1. all: Partial support
    Opera Mobile
    1. 10: Not Поддерживается
    2. 11 — 12.1: Частичная поддержка
    3. 72: Поддерживается
    UC Browser для Android
    1. 13,4: Поддержан
    Android Browser
    1. 2.1- 4.3: Partial
        9012 2.1- 4.3: Partial
          9012 2.1- 4.3: Partial
            9012 2.1- 4.30015
          1. 4.4 — 4.4.4: Partial support
          2. 00% — Supported»> 107: Supported
          Firefox for Android
          1. 106: Supported
          QQ Browser
          1. 13.1: Supported
          Baidu Browser
          1. 13.18: Supported
          KaiOS Browser
          1. 2.5: Частичная поддержка

          Обратите внимание, что должны быть указаны как border-style , так и border-width (не устанавливайте none или 0) для работы border-images.

          Ресурсы:
          MDN Web Docs — Изображение границы
          Документы WebPlatform

          -moz-border-image свойство | -webkit-border-image свойство CSS (каскадные таблицы стилей)

          Вы здесь: Справочник > CSS > свойства > расширения браузера > -moz-border-image

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

          -moz-border-image :
          -webkit-border-image :

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

          Страница JavaScript для этого свойства: MozBorderImage | вебкитбордеризображение. Вы можете найти другие примеры там.

          Возможные значения:

           Одно из следующих значений: 
          І
           Значения в следующем порядке (для их разделения используйте пробел  – символ ): 
          1. URL-адрес (URI)
          2.
           Это значение можно использовать от 1 до 4 раз (для их разделения используйте пробел ) 
          І
          режущая кромка
           Одно из следующих значений: 
          І размер (неотрицательное число с плавающей запятой)
          І <размер в неотрицательной длине>
          І размер в неотрицательных процентах
          3.
           Значения в следующем порядке (для их разделения используйте пробел  – символ ): 
          1. /
          2.
           Это значение можно использовать от 1 до 4 раз (для их разделения используйте пробел ) 
          І
          ширина границы
           Одно из следующих значений: 
          І <ширина границы в неотрицательной длине>
          І средний
          І тонкий
          І толстый
          4.
           Это значение можно использовать от 1 до 2 раз (для их разделения используйте пробел ) 
          І
          повторяющийся стиль
           Одно из следующих значений: 
          І протяжение
          І повторение
          І круглый
          І никто
          І наследовать

          Описание значений:

          / Отделите значения режущей кромки от значений ширины границы.
          URL-адрес (URI) Где URI указывает расположение файла изображения.
          ширина границы в неотрицательной длине Ширина границы в единицах длины. Информацию о поддерживаемых единицах длины см. на странице длины.
          унаследовать Берет значение этого свойства из вычисленного стиля родительского элемента.
          средний По умолчанию.
          нет По умолчанию. Изображение рамки не используется.
          повтор Изображения повторяются, чтобы соответствовать размеру окна.
          круглый Повтор и растяжение, частичные изображения не допускаются.
          размер (неотрицательное число с плавающей запятой) Указывает часть фактического изображения (в соответствии с элементом) в пикселях для использования в качестве границы.
          размер неотрицательной длины Указывает часть изображения в единицах длины для использования в качестве границы. Информацию о поддерживаемых единицах длины см. на странице длины.
          размер в неотрицательных процентах Размер — указанный процент от размера изображения.
          стрейч Изображения растягиваются по размеру коробки.
          толстый Больше средней ширины.
          тонкий Меньше средней ширины.

          По умолчанию: нет .


          Изображение, указанное URI, разрезается на 9штук на 4 режущие кромки (2 горизонтальные, 2 вертикальные).

          Значения размера определяют положение краев обрезки сверху, справа, снизу и слева от изображения.

          • Если установлено только одно значение размера , оно используется для всех четырех сторон.
          • Если указаны два размера , первое значение используется для верхней и нижней сторон, второе — для левой и правой сторон.
          • Если установлены три значения размера , первое значение используется для верхней стороны, второе — для левой и правой сторон, а третье — для нижней стороны.
          • Если указаны четыре значения размера , порядок следующий: сверху, справа, снизу, слева (по часовой стрелке сверху).

          Значения ширины границы определяют ширину границы элемента. Линии-разделители границ (линии между содержимым элемента и границами) разрезают элемент на 9 частей.частей. 9 частей изображения будут соответствовать 9 частям элемента.

          Вы можете указать поведение фитинга с помощью параметров стиля повторения. Если указано только одно значение стиля повтора, оно также влияет на горизонтальное и вертикальное направления. Если значение стиля повтора не определено, по умолчанию используется «растягивание».

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

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