Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS3 Изображения границ



CSS3 изображение как граница

CSS3 свойству border-image, можно задать изображение, которое будет использоваться в качестве границы вокруг элемента.


CSS3 свойство border-image

CSS3 свойство border-image позволяет указать изображение, которое будет использоваться вместо простой границы вокруг элемента.

CSS3 свойство border-image состоит из трех частей:

  1. Изображение для использования в качестве границы
  2. Где нарезать изображение
  3. Определить, следует ли повторять или растягивать среднию часть

Мы будем использовать следующее изображение (называется "border.png"):

Граница

CSS3 свойство 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;
}
Попробуйте сами »

Совет: CSS3 свойство 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;
}
Попробуйте сами »

Практика: граница изображение

Упражнение: граница изображение div

Придайте элементу div границу изображения. Используйте свойство shorthand для определения деталей границы изображения.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>


CSS3 свойства изображение границ

Свойство Описание
border-image Сокращенное свойство для установки всех свойств border-image -*
border-image-source Определяет путь к изображению, которое будет использоваться в качестве границы
border-image-slice Определяет, как разрезать изображение границы
border-image-width Определяет ширину изображения границы
border-image-outset Определяет величину, на которую область изображения границы выходит за пределы бокса
border-image-repeat Определяет, следует ли повторять, округлять или растягивать изображение границы


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.