CSS Border Images
Изображения границ CSS
С помощью свойства CSS border-image
можно задать изображение, которое будет использоваться в качестве границы вокруг элемента.
CSS граница-свойство изображения
Свойство CSS border-image
позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.
Недвижимость имеет три части:
- Изображение, используемое в качестве границы
- Где разрезать изображение
- Определите, должны ли средние сечения повторяться или растягиваться
Мы будем использовать следующее изображение (под названием "border.png"):
Свойство border-image
принимает изображение и нарезает его на девять секций, например, на доске Tic-Tac-Toe. Затем он помещает углы по углам, а средние секции повторяются или растягиваются, как вы укажете.
Примечание: Для работы 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-изображение-различные значения среза
Различные значения среза полностью изменяют внешний вид границы:
Пример 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 | Указывает, должно ли изображение границы повторяться, округляться или растягиваться |