CSS3 Пограничные Изображения
С CSS3 border-image собственности, вы можете установить изображение , которое будет использоваться в качестве границы вокруг элемента.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image недвижимости
CSS3 border-image свойство позволяет указать изображение , которое будет использоваться вместо нормальной границы вокруг элемента.
Имущество состоит из трех частей:
- Изображение для использования в качестве границы
- Где разрезать изображение
- Определить ли средние слои должны быть повторены или вытянуто
Мы будем использовать следующее изображение (так называемый "/css/border.png"):
border-image свойство принимает изображение и разрезает его на девять частей, как крестики-нолики борту. Затем он помещает углы в углах, и средние слои повторяются или растягивается, как вы укажете.
Примечание: Для получения border-image для работы, элемент также нуждается в border набора свойств!
Здесь средние участки изображения повторяются, чтобы создать границу:
Изображение в качестве границы!
Вот код:
пример
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Попробуй сам " Здесь средние участки изображения растягиваются, чтобы создать границу:
Изображение в качестве границы!
Вот код:
пример
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Попробуй сам "  | Совет: border-image свойство фактически является сокращенным свойством для border-image-source , border-image-slice , border-image-width , border-image-outset самого border-image-repeat border-image-outset и border-image-repeat свойства. |
|---|
CSS3 границы изображения - Различные значения Slice
Различные значения среза полностью меняет внешний вид границы:
Пример 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;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
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 | Определяет, должен ли быть повторен граница изображения, закругленные или растянуты |