CSS свойство border image


Свойство border-image

Свойство border-image — сокращенный способ задать свойства границы border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, позволяет одновременно задать фоновое изображение границы элемента, разбить его на фрагменты, указать размер контура и его способность выходить за пределы границы элемента, а также указать способ отображения боковых фрагментов и центра фонового изображения.

Допустимые значения

    допустимые значения смотрите в свойствах border-image-source (обязательный параметр), border-image-slice (обязательный параметр), border-image-w >

    Значение по умолчанию не определяется для составных свойств Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’. Наследование нет Версия CSS CSS 3 Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-border-image, а Firefox 1.0 и выше -moz-border-image. Единственное отличие — это невозможность указать необязательный параметр border-image-outset, а также непрозрачная середина рисунка.

Частично поддерживает свойство border-image Opera 10.5 и выше. Реализована поддержка только обязательных параметров. При этом значение border-image-width будет равно border-width, а центральная часть рисунка будет видимой и будет повторяться или растягиваться в зависимости от отображения боковых сторон.

CSS свойство border image

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

Основная идея

Сокращённая запись свойства состоит из трёх частей:

Таким образом, вы можете указать:

  1. Файл с изображением, которое будет использоваться для границы;
  2. Каким образом разбивать изображение при показе, изображение разбивается на 9 частей;
  3. Каким образом браузер должен применять каждую часть изображения к соответствующим частям элемента.

Необходимые подробности

Давайте рассмотрим каждую часть процесса более детально. Первый пункт очень прост, источник изображения записывается точно также как и в свойстве background-image. Для нашего примера я буду использовать изображение размером 100px на 100px:

Разбиение изображения

Вторая часть может иметь от одного до четырёх значений, как например свойство border-width, которые применяются в привычном нам порядке: top, right, bottom и left.

В нашем случае, поскольку изображение размером 100px x 100px, два правила из примера эквивалентны — картинка будет разбиваться на части в одних и тех же местах. Я добавил разметку на рисунок, чтобы продемонстрировать это:

Repeat, Round, Stretch

Свойство border-image всегда располагает угловые секции вашего изображения в соответствующие углы вашего элемента. Третья часть правила говорит браузеру как расположить средние секции вашей картинки, как они будут вести себя на границах элемента. Значения repeat (повторять часть изображения) и stretch (растягивать) говорят сами за себя. Значение round подразумевает что картинку надо повторять, но только целое количество раз, если же осталось свободное пространство, то результат надо растянуть. Однако Safari и Opera интерпретируют round также как и repeat. Всего может быть два значения, для верхней и нижней границ, а также для левой и правой. Рассмотрим пример, в котором значения для верхней и нижней границ установлено в repeat, а для левой и правой в stretch:

Border-width

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

Также вы можете указать ширину каждой границы отдельно (в следующем примере я указал ширины так, чтобы они совпадали с ширинами картинок):

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

Топ-пост этого месяца:  Численность российской аудитории интернета увеличивается

Особенности браузеров

Как и ожидалось, IE не поддерживает это свойство. Браузеры, которые поддерживают border-image, на самом деле поддерживают только короткую его запись и не все свойства, которые описаны в спецификации. Некоторые полезные свойства не поддерживаются всеми браузерами, например border-image-outset, которое бы решило вот эту проблему.

Также, поведение по умолчанию предполагает что центральная часть изображения будет отброшена. Для того чтобы задействовать её, необходимо использовать ключевое слово fill для свойства border-image-slice

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

Пример


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

Свойство border-image

Обратите внимание: данное свойство поддерживается в браузерах Chrome, Firefox и Safari 6+. Для браузера Opera требуется префикс -o. Данное свойство не поддерживается в браузере IE.

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

Для того, чтобы сделать это необходимо:

  1. Указать путь к изображению-границе;
  2. Указать величину отступа от каждого края изображения для того, чтобы разрезать изображения на 9 частей (верхний левый угол, верхняя сторона, верхний правый угол, левая сторона и т.д.)

В данном примере величина отступа установлена равной 30px с каждой стороны изображения (размер клетки равен 10×10 пикселей). Черными линиями проиллюстрировано как будет в итоге разрезано изображение. Углы и стороны специально выделены разными цветами, чтобы Вы легко могли опознать их в примере далее.

  • Указать ширину границы в пикселях;
  • Указать должно ли изображение повторяться (repeat), округляться (round) или растягиваться (stretch), чтобы заполнить границу элемента.
  • путь путь к изображению, которое будет использоваться в качестве границы элемента;
    отступ величина, которая будет отступаться от каждого края изображения-границы, чтобы разделить его на части (верхний правый угол, верхняя граница и т.д.);
    ширина ширина изображения-границы;
    повторение устанавливает должно ли изображение повторяться (repeat), округляться (round) или растягиваться (stretch), чтобы заполнить границу элемента.

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

    Пример

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

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

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

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

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

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

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

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

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

    Свойство
    border-image 16.0
    4.0 -webkit-
    11.0 15.0
    3.5 -moz-
    6.0
    3.1 -webkit-
    15.0
    11.0 -o-

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

    CSS Синтаксис

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

    Свойство Описание Воспроизвести
    border-image-source Путь к изображению, которое будет использоваться в качестве границы
    border-image-slice Как разрезать изображение границы Воспроизвести »
    border-image-width Ширина границы изображения
    border-image-outset Установить, с помощью которого область изображения границы выходит за пределы поля границы
    border-image-repeat Следует ли изображение границы повторять, округлять или растягивать Воспроизвести »
    initial Устанавливает для этого свойства значение по умолчанию. Прочитать о initial
    inherit Наследует это свойство от родительского элемента. Прочитать о inherit

    Примеры

    Пример

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

    CSS border-image Property

    Example


    Specify an image as the border around an element:

    More «Try it Yourself» examples below.

    Definition and Usage

    The border-image property allows you to specify an image to be used as the border around an element.

    The border-image property is a shorthand property for:

    Omitted values are set to their default values.

    Default value: none 100% 1 0 stretch
    Inherited: no
    Animatable: no. Read about animatable
    Version: CSS3
    JavaScript syntax: object.style.borderImage=»url(border.png) 30 round» Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

    Property
    border-image 16.0
    4.0 -webkit-
    11.0 15.0
    3.5 -moz-
    6.0
    3.1 -webkit-
    15.0
    11.0 -o-

    Note: See individual browser support for each value below.

    CSS Syntax

    Property Values

    Value Description Play it
    border-image-source The path to the image to be used as a border
    border-image-slice How to slice the border image Play it »
    border-image-width The width of the border image
    border-image-outset The amount by which the border image area extends beyond the border box
    border-image-repeat Whether the border image should be repeated, rounded or stretched Play it »
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    More Examples

    Example

    Different slice values completely changes the look of the border:

    Топ-пост этого месяца:  Методы реализации Flickr API Public для получения изображений используем jQuery и JavaScript

    #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;
    >

    Related Pages

    COLOR PICKER

    HOW TO

    SHARE

    CERTIFICATES

    Your Suggestion:

    Thank You For Helping Us!

    Your message has been sent to W3Schools.

    Top Tutorials

    Top References

    Top Examples

    Web Certificates

    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
    Powered by W3.CSS.


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

    Пример

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

    div
    <
    -moz-border-image:url(border.png) 30 30 round; /* Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
    >

    Попробуйте сами »
    Еще примеры внизу этой страницы.

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

    Свойство border-image не поддерживается ни одним из основных браузеров.

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

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

    Safari и Chrome поддерживают альтернативное свойство -webkit-border-image.

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

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

    Совет: Используйте свойства border-image-* для конструирования замечательных масштабируемых кнопок!

    Значение по умолчанию: none 100% 1 0 stretch
    Наследуется: нет
    Версия: CSS3
    JavaScript синтаксис: объект.style.borderImage=»url(border.png) 30 30 round»

    Синтаксис

    border-image: источинк разбиение толщина выступ повторение;

    Значение Описание
    border-image-source Путь к изображению, используемому в качестве границы
    border-image-slice Внутренние смещения изображения-границы, определяющие 9 фрагментов изображения, которые будут использоваться для построения границы
    border-image-width Толщина изображения-границы
    border-image-outset Величина, на которую простирается область границы изображения за пределы блока границы
    border-image-repeat Должно ли изображение-граница повторяться, масштабироваться или растягиваться

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

    Кнопка с границей-изображением
    Этот пример демонстрирует, как создать кнопку со изображением в качестве границы.

    Свойство border-image

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

    Для тестирования этого свойства будем использовать изображение ромбов в формате PNG. Загрузите файл diamonds. png с нашего веб-сайта, перейдя по ссылке http://www.minkbooks.com/content/diamonds. png, и скопируйте его в папку, где находится ваш CSS-файл.

    Свойство border-image берет в качестве основы для узора предоставленное вами изображение. Затем оно нарезает изображение на куски согласно переданным аргументам и размещает полученные куски вокруг объекта, выстраивая таким образом его рамку (рис. 3.1).

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

    Модификации, описанные в листинге 3.18, дают следующий результат: вокруг поля заголовка создается рамка шириной 29 пикселов, а для построения ее содержимого загружается изображение diamonds. png. Значение свойства border-image, равное 29, объявляет размер фрагментов, а stretch — это один из методов размещения фрагментов вокруг поля.

    Рис. 3.1. Узор, на основе которого будем строить рамку; ширина каждого фрагмента 29 пикселов

    Листинг 3.18. Создаем собственную рамку для поля заголовка

    Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 29px;

    -moz-border-image: url(«diamonds. png») 29 stretch; — webkit-border-image: url(«diamonds. png») 29 stretch; border-image: url(«diamonds. png») 29 stretch;

    Последний атрибут может принимать одно из трех значений. Ключевое слово repeat означает повторение фрагментов, вырезанных из изображения, необходимое число раз для того, чтобы полностью закрыть ими сторону элемента. Размер фрагментов не меняется, если места для фрагмента не хватает, он будет обрезан. Ключевое слово round заставляет браузер учитывать длину стороны рамки, на которую накладываются фрагменты, и при необходимости растягивать их, чтобы ни один из фрагментов не был обрезан. Наконец, ключевое слово stretch (которое мы использовали в листинге 3.18) заставляет браузер закрывать сторону рамки одним-единственным фрагментом, растягивая его до нужного размера.

    Для определения ширины рамки мы использовали свойство border, однако можно также применить свойство border-with и задать разные размеры для каждого элемента рамки (свойство border-with принимает четыре параметра, а его синтаксис аналогичен синтаксису margin и padding.). То же самое можно сделать и для вырезаемых фрагментов: добавить до четырех параметров, для того чтобы получить из исходного изображения фрагменты разных размеров.

    Замените кодом из листинга 3.18 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.

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

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

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


    Использование отрицательных значений запрещено, и любое отрицательное значание будет трактоваться как 0.

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

    Примеры использования:

    Свойство border-image-outset определено в спецификации CSS 3 модуль Backgrounds and Borders Level 3 (фон и рамки, уровень 3), применяется к все элементы, кроме внутренних элементов таблиц для которых свойство ‘border-collapse’ установлено в ‘collapse’, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.

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

    Пример

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

    Подробнее примеры ниже.

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

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

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

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

    Значение по умолчанию: none 100% 1 0 stretch
    Inherited: no
    Animatable: no. Читайте о animatable
    Version: CSS3
    Синтаксис JavaScript: object.style.borderImage=»url(border.png) 30 round»

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

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

    Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

    Свойство
    border-image 16.0
    4.0 -webkit-
    11.0 15.0
    3.5 -moz-
    6.0
    3.1 -webkit-
    15.0
    11.0 -o-

    Note: See individual browser support for each value below.

    Синтаксис CSS

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

    Значение Описание
    border-image-source Путь к изображению, используемому в качестве границы
    border-image-slice Как нарезать изображение границы
    border-image-width Ширина изображения границы
    border-image-outset Сумма, на которую область изображения границы выходит за границы рамки
    border-image-repeat Следует ли повторять, округлять или растягивать изображение границы
    initial Присваивает этому свойству значение по умолчанию. Читайте о initial
    inherit Наследует это свойство из родительского элемента. Читайте о inherit

    Другие примеры

    Пример

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

    Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead

    We would like to use an image only for the bottom of a DIV. However, our CSS somehow replicates the image across the body of the DIV instead of placing it at the bottom.

    What are we doing wrong?

    We only need to support mobile Safari.

    6 Answers 6

    Method 1: set 0 width to all (except border-bottom ):

    Method 2: with style.css, create ::AFTER phseudo-element:

    Try with -webkit-border-bottom-image . Don’t forget to include non-webkit browsers. Here is an useful link : http://css-tricks.com/understanding-border-image/

    Here’s how you can define each individual attribute:

    I don’t know about safari mobile but I killed the border part of your css on the fiddle and put this below your div:

    And it did what it seems like you want it to. Does safari mobile not support something like this?

    this is used to put the border image in the bottom of the div

    Топ-пост этого месяца:  CSS псевдоклассы стилизация элементов по индексам
    Добавить комментарий