Изображения рамки CSS

Изображения рамки CSS

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

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

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

Свойство состоит из трех частей:

  • Изображение, используемое в качестве рамки
  • где разрезать изображение
  • определяет, следует ли повторять или растягивать середину части изображения

Мы будем использовать это изображение ("border.png")

border-image Свойство принимает изображение и разрезает его на девять частей, как в доске для игры в tic-tac-toe. Затем углыplaced на углах, а середина повторяется или растягивается в зависимости от ваших настроек.

Обратите внимание:Чтобы сделать 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-outset
  • border-image-repeat

CSS border-image - разные значения裁та

Разные значения裁та полностью изменят вид рамки:

Пример 1:

border-image: url(border.png) 50 round;

Пример 2:

border-image: url(border.png) 20% round;

Пример 3:

border-image: url(border.png) 30% round;

Вот код:

Пример

#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;
}

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

Свойства изображений рамки CSS

Свойство Описание
border-image Краткое свойство для всех свойств border-image-*.
border-image-source Указывает путь к изображению, используемому в качестве рамки.
border-image-slice Определяет, как разрезать изображение border-image.
border-image-width Определяет ширину изображения border-image.
border-image-outset Определяет количество, на которое область изображения border-image выходит за пределы рамки блока.
border-image-repeat Определяет, должны ли повторяться, быть закругленными или растягиваться края изображения.