border-image в CSS


Содержание
Направление градиента border gradient Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров. При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе. В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти. Пример для border gradient слева направо: CSS Border-image Tatjana B. The CSS border property is pretty familiar. With this property, you can define the color, style and width of an element border. The border-image property, on the other hand, lets you define a gradient or an image for a border. The border-image-property is a shorthand for the following: Border-image-source — the source of the image, Border-image-slice — defines the dimensions of slicing the source image into regions, Border-image-width — defines the width of the border image, Border-image-outset — defines the distance between from the border image to the element’s edge, Border-image-repeat — defines how the image is repeated to fill the area of the border. When using this shorthand, if any of the values is omitted, its value will be set to initial. The Syntax When using the border-image property, you can anywhere from one to all the five values mentioned before. Let’s take a look at the syntax. We will be using the shorthand property. Examples Let’s show examples for when you want to use a gradient as a border or an image as a border. Making a Border Out of a Repeating Image The image we will use when creating the border is the following: Making a Border Out of a Gradient We will use the same box element as in the previous example, only the CSS will be different. Browser Compatibility The best way to see what is the compatibility of a property is to check out the CanIUse service. Here we see that the compatibility is generally very good. There are a few issues with border-image-repeat: space in Chrome, so you should be on the lookout for that. Conclusion Although rarely used, the border-image property is quite interesting. It can bring a unique dimension to your design. The best way to see what works for you is to play with the property and unlock its full potential! 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 Должно ли изображение-граница повторяться, масштабироваться или растягиваться Попробуйте сами — Примеры Кнопка с границей-изображением Этот пример демонстрирует, как создать кнопку со изображением в качестве границы. СSS3 Изображение Границ CSS3 изображение как граница CSS свойству border-image , можно задать изображение, которое будет использоваться в качестве границы вокруг элемента. CSS3 Свойство border-image CSS3 свойство border-image позволяет указать изображение, которое будет использоваться вместо простой границы вокруг элемента. Свойство border-image состоит из трех частей: Изображение для использования в качестве границы Где нарезать изображение Определить, следует ли повторять или растягивать среднию часть Мы будем использовать следующее изображение (называется «border.png» ): Свойство border-image принимает изображение и разрезает его на девять разделов, как доска для крестиков — ноликов. Затем оно помещается из угла в углах, и средние часть повторяется или растягивается по мере указания. Примечание: Для элемента border-image , для работы также требуется набор свойств border ! Здесь, средняя часть изображения повторяется для создания границы: Изображение как граница! Пример Здесь, средняя часть изображения растягиваются для создания границы: Изображение как граница! Пример Совет: Свойство border-image сокращенное свойство для свойств border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat . CSS3 изображение граница — различные значения Различные значения свойст полностью изменят внешний вид границы:
  • Комментарии 12
  • Как задать градиент для border в CSS?
  • Навигация по статье:
  • Линейный градиент
  • Особенности border gradient в CSS
  • Направление градиента border gradient
  • CSS Border-image
  • Tatjana B.
  • The Syntax
  • Examples
  • Making a Border Out of a Repeating Image
  • Making a Border Out of a Gradient
  • Browser Compatibility
  • Conclusion
  • CSS3 Свойство border-image
  • Пример
  • Поддержка Браузерами
  • Определение и Использование
  • Синтаксис
  • Попробуйте сами — Примеры
  • СSS3 Изображение Границ
  • CSS3 изображение как граница
  • CSS3 Свойство border-image
  • Пример
  • Пример
  • CSS3 изображение граница — различные значения
  • Border-image в CSS

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

    Илон Маск рекомендует:  Что такое код quotemeta

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

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

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

    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-элемента был установлен фон, то центральная часть картинки должна быть пустой. Но также вы можете использовать это поведение, чтобы создать элемент с красивыми границами и фоном.

    Пример

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

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

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

    Свойство border-image является универсальным и позволяет за одну декларацию устанавливать значения свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

    Если какое-либо значение не указывается, то используется значение по умолчанию.

    CSS синтаксис

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

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

    Пример

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

    Использование изображений рамок 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 :

    Используя для рамки изображение размером 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; приводит к тому, что розовое изображение выводится за пределы зеленого пунктирного контура:

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

    Посмотрите все примеры, обсуждаемые на данный момент на CodePen :

    Свойство 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 .

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

    Данная публикация представляет собой перевод статьи « Decorating the Web with CSS Border Images » , подготовленной дружной командой проекта Интернет-технологии.ру

    Adding CSS Border Images by Using the Border-Image Property

    TL;DR – CSS border images refer to images that you add as borders of HTML elements.

    Contents

    CSS Border Image: Main Tips

    • The border-image shorthand sets images as borders of elements.
    • For the shorthand to work, an element needs to have a border.
    • Border images can be sliced or repeated in to fill in the lines.

    How border-image Is Used

    The CSS border-image property sets an image for the border of an element.

    Here we see the original 60 x 60px image:

    Here we see the image as a border!

    This shorthand property combines these parameters in one declaration:

    Property Description
    border-image Shorthand property you can use for creating an image border
    border-image-source Specifies the directory path for the required image
    border-image-slice Specifies how the border image should be sliced
    border-image-width Specifies the width of the border image
    border-image-outset Specifies the distance between the border and the surrounding elements
    border-image-repeat Specifies the way image is repeated in the border: rounded, stretched, spaced

    Remember: the shorthand requires only border-image-source. Other properties are optional.

    Adding Image Borders to Elements

    Here is a code example for setting up an image border for an HTML element:

    See the common steps of adding the CSS image borders:

    1. The border-image property loads the image by using the provided file path.
    2. Then, the image is sliced into sections. As a result, CSS generates separate corners and side border images.
    3. Then, CSS places the image corners at the corners of the border.
    4. The sections in between the corners are then stretched out from one corner to another.

    Note: the border-image will work properly only if the element has border property.

    Creating Borders From One Repeating Image

    You do not have to stretch images to fill in the borders. Instead, this example repeats the image border to fill the line:

    Here we see that image acting as a border!

    Theory is great, but we recommend digging deeper!
    Learn Web Design: The Ultimate Gu >LearnToProgram

    Changing Slice Values

    Understanding the border-image-slice can be difficult. The property divides the border images into nine parts that become the element borders.

    In the short code examples below, you see that the first line indicates the slicing in pixels. It means that all images are sliced the same regardless of their size.

    When CSS accepts percentages, the slicing is relative to the image size.

    Example No.1

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

    Example no.2

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

    Example no.3

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


    Here is the full code with the examples above:

    CSS Border-image

    Tatjana B.

    The CSS border property is pretty familiar. With this property, you can define the color, style and width of an element border.

    The border-image property, on the other hand, lets you define a gradient or an image for a border.

    The border-image-property is a shorthand for the following:

    • Border-image-source — the source of the image,
    • Border-image-slice — defines the dimensions of slicing the source image into regions,
    • Border-image-width — defines the width of the border image,
    • Border-image-outset — defines the distance between from the border image to the element’s edge,
    • Border-image-repeat — defines how the image is repeated to fill the area of the border.

    When using this shorthand, if any of the values is omitted, its value will be set to initial.

    The Syntax

    When using the border-image property, you can anywhere from one to all the five values mentioned before.

    Let’s take a look at the syntax. We will be using the shorthand property.

    Examples

    Let’s show examples for when you want to use a gradient as a border or an image as a border.

    Making a Border Out of a Repeating Image

    The image we will use when creating the border is the following:

    Making a Border Out of a Gradient

    We will use the same box element as in the previous example, only the CSS will be different.

    Browser Compatibility

    The best way to see what is the compatibility of a property is to check out the CanIUse service.

    Here we see that the compatibility is generally very good. There are a few issues with border-image-repeat: space in Chrome, so you should be on the lookout for that.

    Conclusion

    Although rarely used, the border-image property is quite interesting. It can bring a unique dimension to your design. The best way to see what works for you is to play with the property and unlock its full potential!

    Градиентные границы в CSS

    Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.

    Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

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

    Выглядеть это будет как-то так:

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

    Вот пример Стивена Шоу, закрепляющий border-radius :

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

    Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .

    Читают сейчас

    Похожие публикации

    • 5 марта 2013 в 17:01

    Полезные техники HTML, CSS и JavaScript

    HTML и CSS безумие [перевод]

    [Перевод] CSS Filters

    Заказы

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут


    Комментарии 12

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

    Я думаю рано или поздно мобильные телефоны придут к чему то наподобие диалога установки браузеров в windows — включаешь новый телефон и оно тебя спрашивает что конкретно ставить

    Самсунгобраузер, на самом деле, вполне себе Chrome, просто немного допиленный, и он таки обновляется по мере обновления самого Chrome, не особенно отставая от оригинала. Но в отличие от последнего позволяет использовать блокировщики рекламы, что ценно.

    И Chrome, во избежание дублирования приложений, с самсунгофона, насколько это позволяет утверждать мой личный опыт, штатно выпиливается — при этом вместо него автоматически устанавливается Android System WebView, но это нужный компонент, который, как я понял, используется разными приложениями, которым может потребоваться отображать веб-контент.

    Вопрос, а что, чистый css без синтаксиса «sass» и «less» уже больше не котируется? По такой логике вы могли бы его еще сжать и обфусцировать.

    Как задать градиент для border в CSS?

    Приветствую вас, дорогие друзья!

    Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

    Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

    Линейный градиент

    Для примера рассмотрим такой блок:

    Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:

    Теперь нам нужно задать толщину рамки и её тип:

    Для задания градиента допишем свойство border-image в css файле:

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

    И последнее зададим CSS свойство:

    Чтобы заданный градиент сместился или растянулся по всей границе.
    В итоге весь CSS код задания border gradient будет выглядеть так:

    Вот результат работы кода:

    Особенности border gradient в CSS

    1. 1 В скобках мы можем задать не обязательно 2 цвета, их может быть больше. Для этого просто указываем значения цветов через запятую:

    2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:

  • 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.
  • Направление градиента border gradient

    Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров.

    При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

    В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
    Пример для border gradient слева направо:

    CSS Border-image

    Tatjana B.

    The CSS border property is pretty familiar. With this property, you can define the color, style and width of an element border.

    The border-image property, on the other hand, lets you define a gradient or an image for a border.

    The border-image-property is a shorthand for the following:

    • Border-image-source — the source of the image,
    • Border-image-slice — defines the dimensions of slicing the source image into regions,
    • Border-image-width — defines the width of the border image,
    • Border-image-outset — defines the distance between from the border image to the element’s edge,
    • Border-image-repeat — defines how the image is repeated to fill the area of the border.

    When using this shorthand, if any of the values is omitted, its value will be set to initial.


    The Syntax

    When using the border-image property, you can anywhere from one to all the five values mentioned before.

    Let’s take a look at the syntax. We will be using the shorthand property.

    Examples

    Let’s show examples for when you want to use a gradient as a border or an image as a border.

    Making a Border Out of a Repeating Image

    The image we will use when creating the border is the following:

    Making a Border Out of a Gradient

    We will use the same box element as in the previous example, only the CSS will be different.

    Browser Compatibility

    The best way to see what is the compatibility of a property is to check out the CanIUse service.

    Here we see that the compatibility is generally very good. There are a few issues with border-image-repeat: space in Chrome, so you should be on the lookout for that.

    Conclusion

    Although rarely used, the border-image property is quite interesting. It can bring a unique dimension to your design. The best way to see what works for you is to play with the property and unlock its full potential!

    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 Должно ли изображение-граница повторяться, масштабироваться или растягиваться

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

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

    СSS3 Изображение Границ

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

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

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

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

    Свойство border-image состоит из трех частей:

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

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

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

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

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

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

    Пример

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

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

    Пример

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

    CSS3 изображение граница — различные значения

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL