CSS Изображение границы
CSS Изображение в качестве границы элемента
С помощью CSS свойства border-image вы можете установить изображение, которое будет использоваться в качестве границы вокруг элемента.
CSS свойство border-image
CSS свойство border-image позволяет указать изображение, которое будет использоваться вместо обычной рамки вокруг элемента.
Это свойство имеет три части:
- Изображение для использования в качестве границы
- Где нарезать изображение
- Указание, должны ли средние секции повторяться или растягиваться
Мы будем использовать следующее изображение (называется "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-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-width | Определяет ширину границы изображения |
| border-image-outset | Определяет величину, на которую область изображения границы выходит за границы блока |
| border-image-repeat | Определяет, должно ли изображение границы повторяться, округляться или растягиваться |
