Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Свойство border-image в css3

Всем привет. В спецификации css3 есть такое интересное свойство border-image. С помощью него мы можем задавать рамки в виде картинок.

Допустим у нас есть две картинки:

Портрет и рамка

На первой мы видим мой портрет, а на второй обычную рамку.

Теперь используя свойство border-image совместим вместе портрет и рамку.

<style>
    img{
        border: 30px solid #fff;
        -webkit-border-image: url(img/border.jpg) 80 stretch;
        -moz-border-image: url(img/border.jpg) 80 stretch;
        -o-border-image: url(img/border.jpg) 80 stretch;
    }
</style>
<img src="img/people.jpg">
Свойство border-image

В результате портрет обернется в рамку и мы получим такой интересный эффект. Давайте разберемся со стилями.

В самом начале мы задаем рамку с помощью свойства border, здесь нас интересует только толщина рамки 30px остальные значения на результат не повлияют.

Далее у нас через вендорные префиксы указывается свойство border-image, это необходимо для кроссбраузерности. В самом свойстве border-imge мы указываем путь до картинки с рамкой, толщину контура картинки которая будет взята в качестве рамки, stretch - растягивает изображение на все пространство.

Для отступа от рамки со стороны изображения можно воспользоваться свойством border-image-outset.

border-image-outset:20px;

На этом данная статья подошла к концу. Если появились вопросы оставляйте их в комментариях или пишите в группу

вк

Я с вами прощаюсь. Желаю успехов и удачи! Пока!

Оцените статью

Еще статьи

Метод Object.is() в js

Редактирование контента на странице в HTML5

Javascript генераторы

Работа с отображением курсора в CSS

Методы и свойства в javaScript для работы со строками

User select css

Модальные окна в python

Модуль BeautifulSoup4 в python

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.