2.17. CSS3-рамка
CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.
Закруглённые углы и рамки-изображения
- Содержание:
- 1. Закругление углов с помощью border-radius
- 2. Рамки-изображения border-image
- 2.1. Ширина рамки-изображения border-image-width
- 2.2. Ресурс рамки-изображения border-image-source
- 2.3. Элементы рамки-изображения border-image-slice
- 2.4. Повтор рамки-изображения border-image-repeat
- 2.5. Смещение рамки-изображения border-image-outset
- 3. Градиентная рамка
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
Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства 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;}
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;
При помощи такого простого изображения можно получить вот такие рамки для элемента.
/* Пример 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;
}
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;}
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;}
2.4. Повтор рамки-изображения border-image-repeat
Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.
| border-image-repeat | |
|---|---|
| Значения: | |
| stretch | Растягивает изображение на все пространство. Значение по умолчанию. |
| repeat | Повторяет заполняющую часть изображения, при этом видны места стыков с угловой частью, и если длины образца не хватает, то он растягивается. |
| round | Наиболее точно заполняет промежуток между углами рамки, дублируя заполняющую часть изображения, при этом может образовать стыки по середине стороны рамки. |
| space | Действует аналогично с repeat. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
Синтаксис
div {border-image-repeat: repeat;}
2.5. Смещение рамки-изображения border-image-outset
Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений.
| border-image-outset | |
|---|---|
| Значения: | |
| длина | Отступ рамки-изображения задается с помощью любого положительного числа, указанного в px или em. |
| число | Числовое значение, на которое умножается border-width. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
Синтаксис
div {border-image-outset: 10px;}
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