Здравствуйте, дорогие друзья!) Я продолжаю линейку постов на тему CSS3 и сегодня хочу Вам предложить рассмотреть новую (может и не для всех) возможность облегчения создания кнопок (и не только!) для Ваших веб-страничек. И это свойство называется "border-image".
Что с помощью него можно создать?
Ответ простой - красивый объект, границы которого будут созданы с помощью картинки.
Возьмем и нарисуем, к примеру, вот такую форму:
Как Вы видите, это границы кнопки. С помощью свойства "border-image" мы растянем эту форму по ширине текста, который будет внутри, и в результате получим полноценную кнопочку с красивыми закругленными углами, при этом нам не понадобится резать каждый уголок кнопки, а потом с помощью HTML-кода склеивать все эти части, чтобы получить кнопку. Все это оставим в прошлом и реализуем нашу идею одной строчкой кода с помощью CSS3!)
Так как каждый популярный браузер понимает правила по-своему, мы напишем следующий универсальный код:
.myimage {
border-image: url(bord-im2.png) 10;
-webkit-border-image: url(bord-im2.png) 10;
-moz-border-image: url(bord-im2.png) 10;
}
Для того, чтобы картинка заполнялась в форме нужно прописать "round":
.myimage {
border-image: url(bord-im2.png) 10 round;
-webkit-border-image: url(bord-im2.png) 10 round;
-moz-border-image: url(bord-im2.png) 10 round;
}
А если Вам надо, чтобы растягивалась, нужно прописать "stretch":
.myimage {
border-image: url(bord-im2.png) 10 stretch;
-webkit-border-image: url(bord-im2.png) 10 stretch;
-moz-border-image: url(bord-im2.png) 10 stretch;
}
По умолчанию установлен "stretch".
На данный момент это свойство поддерживают браузеры: Google Chrome, Safari, Firefox 3.6 (по-моему, начиная с версии 3.1 это свойство уже поддерживается). К сожалению Opera 10.10 еще не понимает свойство "border-image", а за IE 9 просто молчу 
Вот такое вот интересное свойство нас ждет в CSS3. В следующих постах я опишу еще несколько интересных свойств в 3-м CSS-е. Так что, stay in touch! 
ФИ: Михайленко Олег.
Круто!
а то!
чет, Вы Легич, нахалтурили с описаниями :Р
что за параметр 10? и что там нам нужно чтоб ростягивалось? чет я не понял
Цифры – это отступы
Извините за любопытство, но отступы от чего?
Отступы от верхнего, правого, нижнего и левого краев. Ну и, понятное дело, ели задан один только параметр, то отступы будут равномерными.
Спасибо за статью. Такой вопрос: с помощью этого ли атрибута была сделана затемненная граница для “тела” сайта? Хотелось бы узнать, как именно, если не секрет:)
Не совсем понял о какой границе Вы говорите
О границе центральной части страницы, обрамленной вычурным:) рисунком сверху и снизу, фон которой белого цвета и в которой непосредственно находится вся инфа. А границы по бокам затемнены, что создает эффект “приподнятости” центрального страницы над остальным сероватым фоном. Объяснил, как смог
Понял
Нет, это затемнение сделано не с помощью “border-image”. Это вырезанная полосочка высотой в 1px и размножена по высоте с помощью “repeat-y”.
Благодарю за разъяснение
Ю а велкам!
пришел сюда именно за этим. был бы рад картинке-примеру для стренч? здесь ее точно не хватает
Вы, наверное, невнимательно прочитали статью, я писал, что “По умолчанию установлен ”stretch“. И тот пример, который приведен в статье, он, как раз, со “stretch”.
Классный сайт сделал Олег, много интересного для себя нашел информации. Спасибо тебе
Спасибо!) Всегда пожалуйста!
Народ, помогите плз. через border-image проблем не возникает, но мне надо определить только left и right с разными картинками (возможно одну отразить по горизонтали). При этом код не воспринимается, и границы не отображаются вообще. использую:
border-left-image: url() 0 0 0 x;
border-right-image: url() 0 x 0 0;
В чём может быть касяк?
Вы правы, эти правила не срабатывают. Немного погуглил, никто об этом ничего не пишет.
Извините, это моя ошибка.
Правильная информация на http://www.w3.org/TR/css3-background/#border-images