Изображения границ 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 раундов;
Пример 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;
}
Свойства изображения границы 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 |