СSS3 Изображение Границ
CSS3 изображение как граница
CSS свойству border-image, можно задать изображение,
которое будет использоваться в качестве границы вокруг элемента.
CSS3 Свойство border-image
CSS3 свойство border-image позволяет указать изображение,
которое будет использоваться вместо простой границы вокруг элемента.
Свойство 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.
CSS3 изображение граница - различные значения
Различные значения свойст полностью изменят внешний вид границы:
Пример 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;
}
Редактор кода »
Проверьте себя с помощью упражнений!
Свойства CSS3 изображение границ
| Свойство | Описание |
|---|---|
| border-image | Сокращенное свойство для установки всех свойств border-image -* |
| border-image-source | Определяет путь к изображению, которое будет использоваться в качестве границы |
| border-image-slice | Определяет, как разрезать изображение границы |
| border-image-width | Определяет ширину изображения границы |
| border-image-outset | Определяет величину, на которую область изображения границы выходит за пределы бокса |
| border-image-repeat | Определяет, следует ли повторять, округлять или растягивать изображение границы |
