2.17. CSS3-рамка

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

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

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 Наследует значение свойства от родительского элемента.

Варианты

div {width: 100px; height: 100px; border: 5px solid;}
.r1 {border-radius: 0 0 20px 20px;}
.r2 {border-radius: 0 10px 20px;}
.r3 {border-radius: 10px 20px;}
.r4 {border-radius: 10px/20px;}
.r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;}
.r6 {border-radius: 10px 20px 30px 40px/30px;}
.r7 {border-radius: 50%;}
.r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;}
.r9 {border-bottom-left-radius: 100px;}
.r10 {border-radius: 0 100%;}
.r11 {border-radius: 0 50% 50% 50%;}
.r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
border-radiusborder_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-radius не влияет на border-image.

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

Синтаксис

/* border-image-source и border-image-slice */
border: 10px solid transparent;
border-image: url(border_round.png) 30;

/* border-image-source и border-image-slice и border-image-repeat */
border: 10px solid transparent;
border-image: url(border_round.png) 30 space;

/* border-image-source и border-image-slice / border-image-width */
border-image: repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px) 20 / 20px;

/* border-image-source и border-image-slice / border-image-width / border-image-outset и border-image-repeat */
border-image: linear-gradient(to right, salmon 0%, purple 100%) 10 / 10px / 20px space;

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

/* Пример 1 */
div {
width: 260px; height: 100px; 
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px; 
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: 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 Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-width: 30px;}
border_image_width
Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

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

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

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

Синтаксис

div {border-image-source: url(border.png);}

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

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

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

Синтаксис

div {border-image-slice: 50 20;}
border-image-slice
Рис. 4. Пример задания срезов рамки-изображения

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

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

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

Синтаксис

div {border-image-repeat: repeat;}
strech_repeat_round
Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

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

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

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

Синтаксис

div {border-image-outset: 10px;}
outset
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

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

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

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

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

<div class="wrap"><div class="gradient"></div></div>
* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
background: #00E4F6;
}
.gradient {
height: 150px; 
width: 50%; 
margin: 0 auto;
border: 10px solid transparent;
border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);
border-image-slice: 1;
}

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

<div class="wrap"><div class="gradient"></div></div>
* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
}
.gradient {
height: 150px; 
width: 50%; 
margin: 0 auto;
border: 10px solid transparent;
border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px);
}

По материалам CSS Backgrounds and Borders Module Level 3

Поделиться: