Border image css: border-image-slice — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

CSS. Border-image, о котором вы, возможно, не знали

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

Описание свойства border-image состоит из трех частей:

border-image: url(border-image.png) 25% repeat;

Это позволяет специфицировать следующее:

1. Непосредственно изображение, которое будет использовано в border’е
2. Где нарезать это изображение
3. Каким образом браузер будет использовать эти секции при рендере

Давайте рассмотрим каждую секцию более подробно. Первая часть легка для понимания, она знакома по свойству background-image. Для демонстрации остального будем использовать следующее изображение 100×100 пикселей:

Вторая часть выражения может иметь от одного до четырех значений, почти как border-width, а специфицируются они в следующем порядке:

  • top
  • right
  • bottom
  • left

В качестве единиц измерения можно использовать проценты или пиксели. При этом есть интересная особенность, для описания в процентах обязательно использовать знак «%», в то время как для пикселей обозначение «px» не обязательно.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

Как мы уже установили, размеры изображения 100×100 пикселей, так что в обоих случаях выше оно будет нарезано в одних и тех же местах. Для лучшего понимания, посмотрите на изображение с наглядными замерами:

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

Возможные свойства repeat (повторять) и stretch (растянуть) – говорят сами за себя.

Свойство round – своего рода комбинация repeat и stretch – означает, что изображение будет повторяться целое количество раз, а остаток пространства будет заполнен за счет растягивания этих кусочков.

element {
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image. png") 25 30 10 20 repeat stretch;
}

В этом примере для top/bottom установлено значение repeat, а для left/right – stretch.

border-image не будет делать ничего, если не установить значение для border-width, то есть срез изображения будет масштабироваться на заданную ширину. Если при этом использовать свойство border, то можно подстраховаться для браузеров, которые не поддерживают в полной мере css3 и свойство border-image:

element {
  border: 50px double orange;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Так же можно специфицировать ширину для каждого border’а:

element {
  border-color: orange;
  border-style: double;
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Предсказуемо, в наши дни с border-image у вас возникнут проблемы только в IE. Однако, чтобы предупредить некоторые проблемы со средней частью border’а, следует определять свойство border-image-slice со значением fill: по умолчанию, средняя часть border-imgae, может отбрасываться, border-image-slice: fill позволяет этого избежать (см. спецификацию)

Скрытые возможности CSS: 10 полезных советов

21 совет профессионалов в CSS

CSS border image slice

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Укажите способ среза изображения границы:

#borderimg {
    border-image-slice: 30%;
}

Определение и использование

border-image-slice свойство определяет способ среза изображения, заданного параметром border-Image-Source. Изображение всегда разрезается на девять секций: четыре угла, четыре кромки и середина.

«средняя» часть обрабатывается как полностью прозрачная, если не задано ключевое слово Fill.

Совет: Также посмотрите на свойство border-Image (Сокращенное свойство для установки всех свойств Border-Image-*).

Значение по умолчанию:100%
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.borderImageSlice=»30%»

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

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

Свойство
border-image-slice15.011.015.06.015.0

Синтаксис CSS

border-image-slice: number|%|fill|initial|inherit;

Примечание: Свойство border-image-slice может принимать от одного до четырех значений. Если четвертое значение опущено, то оно совпадает с вторым. Если третья также опущена, то она совпадает с первой. Если вторая также опущена, то она совпадает с первой.

Значения свойств

ЗначениеОписание
numberЧисло(а) представляют Пиксели для растровых изображений или координат для векторных изображений
%Проценты относительно высоты или ширины изображения
fillПриводит к отображению средней части изображения
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о
inherit)

Похожие страницы

CSS Справочник: CSS Border Images

CSS Справка: border-image Свойство

CSS Справка: border-image-outset Свойство

CSS Справка: border-image-repeat Свойство

CSS Справка: border-image-source Свойство

CSS Справка: border-image-width Свойство

HTML DOM Справочник: borderImageSlice Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.

ru

Правила и Условия Политика конфиденциальности О нас Контакты

границ изображения-ширины — CSS: Каскадные таблицы стилей

CSS-свойство border-image-width задает ширину изображения границы элемента.

Если значение этого свойства больше, чем значение border-width элемента , изображение границы будет выходить за границы заполнения (и/или содержимого).

 /* Значение ключевого слова */
ширина изображения границы: авто;
/* значение <длины> */
граница-изображения-ширина: 1rem;
/* <процентное> значение */
ширина изображения границы: 25%;
/* значение <число> */
ширина границы изображения: 3;
/* сверху и снизу | Лево и право */
ширина границы изображения: 2em 3em;
/* сверху | влево и вправо | нижний */
ширина границы изображения: 5% 15% 10%;
/* сверху | право | дно | оставил */
ширина границы изображения: 5% 2em 10% авто;
/* Глобальные значения */
ширина границы изображения: наследовать;
ширина границы изображения: начальная;
ширина границы изображения: вернуться;
ширина границы изображения: обратный слой;
ширина границы изображения: не установлено;

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

  • Когда указано одно значение , оно применяет одинаковую ширину ко всем четырем сторонам .
  • Когда указаны два значения , первое значение ширины применяется к верхнему и нижнему , второе — к левому и правому .
  • Когда указаны три значения , первая ширина применяется к сверху , второй до слева и справа , третий до снизу
    .
  • Когда указаны четыре значения , ширина применяется к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<процент длины>

Ширина границы, заданная как или . Проценты относятся к ширине области изображения границы для горизонтальных смещений и высоте области изображения границы для смещений по вертикали. Не должен быть отрицательным.

<номер>

Ширина границы, указанная как кратная соответствующему border-width . Не должен быть отрицательным.

авто

Ширина границы делается равной внутренней ширине или высоте (в зависимости от того, что применимо) соответствующего

граница изображения-срез . Если изображение не имеет требуемого внутреннего размера, вместо него используется соответствующий border-width .

 граница-изображения-ширина = 
 [ <процент длины [0,∞]> | <число [0,∞]> | auto ]{1,4} 
 "> = 
  |

Мозаика изображения границы

В этом примере изображение границы создается с использованием следующего файла «.png», который 90 на 90 пикселей:

Таким образом, каждый круг на исходном изображении имеет размер 30 на 30 пикселей.

HTML 
 

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam
  сладострастие. At vero eos et accusam et justo duo dolores et ea rebum. клитор
  kasd gubergren, no sea takimata Sanctus est Lorem ipsum dolor sit amet.
CSS 
 р {
  граница: сплошная 20 пикселей;
  border-image: url("border.png") 30 раундов;
  ширина изображения границы: 16 пикселей;
  отступ: 40px;
}
Result
Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-width

BCD tables only load in the browser

with JavaScript enabled. Включите JavaScript для просмотра данных.
  • Фоны и рамки
  • Изучение CSS: фоны и границы

Последнее изменение: , участниками MDN

Свойство CSS border-image

❮ Назад Полное руководство по CSS Далее ❯


Пример

Укажите изображение в качестве границы вокруг элемента:

#borderimg {
  border-image: url(border.png) 30 round;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

Свойство border-image является сокращенным свойством для:

  • border-image-source
  • граница-изображение-срез
  • ширина изображения границы
  • граница-изображение-начало
  • граница-изображение-повтор

Пропущенные значения устанавливаются на значения по умолчанию.

Показать демо ❯

Значение по умолчанию: нет 100% 1 0 растяжение
По наследству: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.borderImage=»url(border.png) 30 раундов» Попытайся

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

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

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Собственность
граница изображения 16.0
4.0 -вебкит-		 11,0 15,0
3,5 -моз-		 6.0
3.1 -вебкит-		 15,0
11,0 -о-

Примечание: См. поддержку отдельных браузеров для каждого значения ниже.

Синтаксис CSS

border-image: исходная ширина фрагмента начало повтора |initial|inherit;

Значения свойств

Значение Описание Демо
граница-изображение-источник Путь к изображению, которое будет использоваться в качестве рамки Демонстрация ❯
границы изображения Как разрезать изображение границы Демонстрация ❯
ширина изображения границы Ширина изображения границы Демонстрация ❯
начало изображения границы Величина, на которую область изображения границы выходит за рамки рамки Демонстрация ❯
граница-изображение-повтор Следует ли повторять, округлять или растягивать изображение границы Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Различные значения среза полностью меняют внешний вид границы:

#borderimg1 {
  граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  border-image: url(border.png) 50 раундов;
}

#borderimg2 {
 граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  border-image: url(border.png) округление 20%;
}

#borderimg3 {
 граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  border-image: url(border.png) 30% округление;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Изображения границ CSS

Справочник по CSS: свойство border-image-outset

Справочник CSS: свойство border-image-repeat

Справочник CSS: свойство border-image-slice

Справочник CSS: свойство border-image-source

Справочник CSS: свойство border-image-width

Ссылка HTML DOM: свойство borderImage

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

3 Лучшие примеры0114 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

9017 9017 О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *