Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Деление рисунка для рамки на области.
Свойство border-image-slice
– рамка 150x150 – деление на области
– рисунок для рамки 90x90 – деление на области
Задает размер областей рисунка для рамки.
Возможные значения border-image-slice:
- число - Значения, которые указывают в пикселях размеры частей рисунка для рамки, задавая тем самым области деления. Единицы (px) не пишутся, т.е. 30, а не 30px.
- % - Размеры частей рисунка в пикселях относительно размеров рисунка. Горизонтальные относительно ширины, вертикальные – относительно высоты.
- fill - Обозначает, что рисунок не обрезается внутренним краем рамки, а заполняет также область внутри рамки (задается вместе с числом или процентами).
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Число значений | Результат |
---|---|
1 | Область одинаковой толщины со всех сторон рисунка. |
2 | Первое значение устанавливает толщину верхней и нижней области рисунка, второе - левой и правой. |
3 | Первое значение устанавливает толщину верхней области рисунка, второе - левой и правой, а третье - нижней. |
4 | Первое значение устанавливает толщину верхней области рисунка, второе - правой, третье - нижней, а четвертое - левой. |
Рисунок рамки повторяется при border-image-slice: 50
Разное количество значений свойства border-image-slice
30
30 15
30 30 15
30 45 30 15
Исходный код этого примера:
<style>
.wrap {
margin-bottom: 20px;
}
.wrap div {
width: 200px;
height: 100px;
line-height: 100px;
display: inline-block;
text-align: center;
font-size: 18px;
border-style: solid;
border-image-source: url(border_image.png);
border-image-width: 20px;
}
.wrap1 img {
width: 300px;
height: 400px;
border: 50px solid;
border-image-source: url(border_frame.png);
border-image-slice: 50;
border-image-repeat: repeat;
}
</style>
<h2>Рисунок рамки повторяется при border-image-slice: 50</h2>
<div class="wrap1">
<img src="image.jpg" width="300" height="400" alt="Портрет в раме">
</div>
<h2>Разное количество значений свойства border-image-slice</h2>
<div class="wrap">
<div style="border-image-slice: 30;">30</div>
<div style="border-image-slice: 30 15;">30 15</div>
<div style="border-image-slice: 30 30 15;">30 30 15</div>
<div style="border-image-slice: 30 45 30 15;">30 45 30 15</div>
</div>
.
Прокомментировать/Отблагодарить