2.16. CSS3 рамка

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

Закруглённые углы и рамки-изображения

1. Закругление углов с помощью border-radius

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

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.1
Chrome for Android: 44

border-radius

Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip.

Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius можно закруглить каждый угол отдельно.

Если задать два значения для свойства border-radius, то первое значение закруглит верхний левый и нижний правый угол, а второе — верхний правый и нижний левый.

Значения, заданные через /, определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.

border-radius
(border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)
Значения:
длина Позволяет закруглить углы блока с помощью значений единиц длины — px, em.
% Значения, закругляющие углы, задаются в процентах от длины и ширины сторон элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Варианты

border-radius
border_r_2

Рис. 1. Примеры различных вариантов закругления углов блока

2. Рамки-изображения border-image

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

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;}.

border-image
Значения:
краткая запись Устанавливает рамку-изображение с помощью одного свойства, являющегося краткой записью свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat. Значения по умолчанию: {border-image: 1 none 100% stretch 0;}.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

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

border_1border_2
border_image_primerborder_slice

Рис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat.
Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice.

2.1. Ширина рамки-изображения border-image-width

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

border-image-width
Значения:
длина Устанавливает ширину рамки в единицах длины — px / em. Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число Числовое значение, на которое умножается значение border-width.
% Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
auto Соответствует значению border-image-slice.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

border_image_width

Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

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

border-image-source
Значения:
none Отсутствие изображения для рамки. Значение по умолчанию.
url(url) Относительный или абсолютный путь к изображению.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

2.3. Элементы рамки-изображения border-image-slice

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

border-image-slice
Значения:
число Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе — правой и левой.
Три значения: первое определяет размер верхней границы, второе — правой и левой, а третье — нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px.
% Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
fill Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

border-image-slice

Рис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

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

border-image-repeat
Значения:
stretch Растягивает изображение на все пространство. Значение по умолчанию.
repeat Повторяет заполняющую часть изображения, при этом видны места стыков с угловой частью, и если длины образца не хватает, то он растягивается.
round Наиболее точно заполняет промежуток между углами рамки, дублируя заполняющую часть изображения, при этом может образовать стыки по середине стороны рамки.
space Действует аналогично с repeat.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

strech_repeat_round

Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображение border-image-outset

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

border-image-outset
Значения:
длина Отступ рамки-изображения задается с помощью любого положительного числа, указанного в px или em.
число Числовое значение, на которое умножается border-width.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

outset

Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Смещение внешней рамки outline-offset

Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline.

outline-offset
Значения:
длина Задаёт расстояние с помощью единиц длины — px / em. Отрицательное значение отображает рамку внутри элемента, положительное — снаружи элемента.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

outline_offset

Рис. 7. Пример оформления изображения внешней рамкой

4. Градиентная рамка

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

Полупрозрачная рамка

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

Почтовый конверт

  • Алексей

    Всё таки что такое border-image-slice не совсем понятно…

    • Добавила новый рисунок для наглядности. Как делится картинка с помощью срезов, смотрите Рис. 2.

      • Алексей

        Да с рисунком два всё давно ясно, вот они 9 частей, всё понятно… Но вот КАКИМ ОБРАЗОМ задаётся этот размер — совершенно не ясно. Что означает значение 40? 40 пикселей? 40 пикселей у нас ширина, которая задана другим свойством. Более того, когда играешься этими размерами (slice) боковые рамки иногда чудным образом исчезают… В общем объясните, пожалуйста, подробно, принцип работы, если можно…

        • Числовое значение вычисляется в px. В случае border-image-slice: 40; из каждой вершины рисунка «вырезается» квадрат размером 40х40 px, каждый из которых помещается в соответствующие вершины блока. В примере показано, что размер изображения равен размеру блока, а толщина рамки блока равна всем размерам вырезанного квадрата. В таком случае искажения не будет. Если толщина рамки меньше или больше стороны квадрата, то рисунок будет сжиматься/растягиваться. Если для среза заданы два числа, первое отвечает за высоту, второе за ширину.

          • Алексей

            Елена, а можете дать прямую ссылку на на border.png, квадрат со снежинками размером 200px, который Вы добавили в пример? Попробую с ним поиграться… Спасибо!

          • http://html5book.ru/wp-content/uploads/2015/10/border-new.png — это рисунок. Живой пример использования рамки-изображения http://html5book.ru/examples/demo-styling-images-3.html

          • Алексей

            Спасибо Вам большое! Поиграюсь в песочнице… А пример красивый! 🙂

          • Пожалуйста! На мой взгляд в этом примере оптимальное применение этому свойству))

          • Алексей

            Учту 🙂

          • Алексей

            8я идея в Вашем примере по ссылке довольно оригинальна 🙂

          • Согласна) Псевдоэлементы на пару с генерируемым контентом — крутая штука. Разметки минимум, зато какие результаты!

          • Алексей

            Да, и идея красивая и реализация интересная! Не сразу заметил, что псевдоэлементы немного отличаются по цвету… Вообще было бы здорово, создать такой скрипт, который анализировал как-то содержимое рисунка, и предлагал установить цвет рамок… Конечно у скрипта глаз нет, и такая возможность хороша, только если можно потом всё поменять в ручном режиме, но для заливки большого количества фотографий он мог бы сгодится…
            А если б Вам нужно было туда добавить третью рамку? По какому пути Вы бы пошли? (вопрос на засыпку и если над ним нужно ломать голову, то можете не отвечать 🙂 )

          • Вместо скрипта можно использовать цветовые сочетания colourlovers.com, я там тоже коллекционирую цветовые палитры)))

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

          • Алексей

            Для рамки одного элемента делаешь список, и только в одном пункте рисунок, а остальные — для оформления?

            Цветовые палитры, пожалуй, хороши для выбора рамки индивидуально для каждого рисунка, а я говорю, когда автомат делает что-то приемлемое ДО вмешательства человека 🙂

            Кстати сочетания цветов, неплохо ещё смотреть тут:

            http://design-seeds.com/

          • Да, в последнем элементе списка рисунок, остальные как подложка.

            Сервис design-seeds.com в копилку, спасибо. От себя добавлю colorcombos.com, там по URL можно получить палитру цветов.

          • Алексей

            Да, со всем этим нужно будет подразобраться, когда буду рисование осваивать, и всякие программы вроде Фотошопа или Gimp… Хочется, но всё в своё время, пока нужно вёрстку освоить, а потом уже как программирование, так и графику… Интересно и то, и то!

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

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

    Средняя часть не участвует в формировании рамки-изображения, для png-рамки ее может не быть вообще.

    Промежутки между углами в элементе заполняются оставшимися между угловыми частями картинки с помощью свойства border-image-repeat.

    border-image-width управляет шириной рамки-изображения.

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

    За основу всегда берется вырезаемый квадрат (или прямоугольник), им заполняются углы. Левый вырезанный квадрат заполнит левый угол элемента, правый — правый и т.д.

    1) Если border-image-slice=border-image-width, уголки заполнятся как есть, 1:1. Если при этом border-image-repeat=stretch, оставшиеся части картинки растянутся по вертикали и горизонтали для соответствующих сторон элемента. Если border-image-repeat=repeat, стороны заполнятся вырезанными частями без деформации, по принципу кирпичиков, обрезаясь или надстраиваясь.

    — Если border-image-slice >border-image-width, уголки заполнятся вырезанными квадратиками в уменьшенном масштабе.

    — Если border-image-slice<border-image-width, уголки заполнятся вырезанными квадратиками в увеличенном масштабе.

    Надеюсь, так будет понятнее))

    • Алексей

      Елена, Вы знаете, более-менее стало ясно, как оно работает, по крайней мере, в первом приближении! Большое спасибо, что потратили на меня столько времени и за подробные объяснения! 🙂

    • Алексей

      Вот ещё вариант с радиальным градиентом в песочнице:

      http://jsfiddle.net/Launder/jeauxeu8/

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

      • Спасибо, пример хороший, приятно видеть ваш интерес к веб-технологиям) Подход у вас правильный, ведь чтобы разобраться, как работает то или иное свойство, нужно с ним экспериментировать.

  • В этом случае вы уходите от начального условия — картинка делится на 9 частей, иначе нет смысла.

    • Алексей

      Ну по-моему понимание куда исчезают грани при определённых значениях border-image-slice полезно — дабы не впадать в ступор 🙂

  • А я Елена, а не Наталья 😉

    • Алексей

      Ой, простите! Вот ведь бестолочь!))

  • Алексей

    Кстати, а можно ли, добавить border-image только для одной стороны?

    • Можно, для этого нужно задать, например, border-image-width: 15px 0 0 0; В этом варианте рамка будет только сверху.

  • VovanPopov

    А как же значения «initial» и «inherit» у border-image-slice, border-image-width и т.д.? Или я что-то путаю?

  • Владимир

    Думаю, будет очень полезная ссылка к данной теме: http://border-image.com