Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Деление рисунка для рамки на области.
Свойство 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>

.