Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Изображения границ CSS


Изображения границ CSS

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


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

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

Имущество состоит из трех частей:

  1. Изображение для использования в качестве границы
  2. Где разрезать изображение
  3. Определите, должны ли средние разделы повторяться или растягиваться

Мы будем использовать следующее изображение (называемое «border.png»):

Граница

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

Примечание. Для border-imageработы элементу также необходимо установить borderсвойство!

Здесь средние части изображения повторяются для создания границы:

Изображение как граница!

Вот код:

Пример

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Здесь средние части изображения растягиваются для создания границы:

Изображение как граница!

Вот код:

Пример

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Совет: Свойство border-imageна самом деле является сокращенным свойством для свойств border-image-source, border-image-slice, border-image-widthи .border-image-outsetborder-image-repeat



CSS border-image — разные значения среза

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

Пример 1:

border-image: url(border.png) 50 раундов;

Пример 2:

border-image: url(border.png) 20% округление;

Пример 3:

border-image: url(border.png) 30% круглый;

Вот код:

Пример

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Проверьте себя с помощью упражнений

Упражнение:

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

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>


Свойства изображения границы CSS

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched