Дайте CSS в стиле div "border-left-image"

Question

Просто пытаюсь выделить основной контент div на сайте границей с левой и правой стороны div.Вместо того, чтобы иметь отдельные div для каждой границы, я решил использовать возможность border-left-image в CSS3, чтобы это произошло.Мой код выглядит следующим образом:

#content {
    background-color: #7FC3F4;
    height: 100%;
    width: 900px;
    border-left-width: 30px;
    border-left-image: url(../images/border_left_gradient.png);
    border-right-width: 30px;
    border-right-image: url(../images/border_right_gradient.png);
    margin-right: 10%;
    margin-left: 10%;
}

Из всех поисков Google, которые я сделал, мне еще предстоит найти объяснение, почему этот код недействителен.Некоторые результаты возвращают числовые значения, которые будут помещены после URL, однако независимо от того, какую комбинацию чисел я пробую, кубики не будут.

Answer 1

border-image - теперь поддерживается во всех основных браузерах (2014-05-22)

Демо с одним border-left-image

Демо с различными левыми и правыми изображениями.

Для демоверсий теперь требуется минимум Chrome 15, Safari 6, Firefox 15, IE 11 или Opera 15.

на самом деле невозможно сделать это с отдельными файлами изображений, но вы можете нарезать одно изображение слева и справа. См. border-image страницу в MDN, в которой приведены некоторые хорошие примеры, или CSS Tricks для получения полной информации о том, как работают другие параметры нарезки.

Примечание: , если вам нужна более ранняя поддержка браузера, спросите, как предыдущая версия моего ответа работала с Chrome 12, Safari 5.0.3, Firefox 4 и Opera 10, но я обновил его теперь, как новый браузеры поддерживают CSS3 без префиксов.

Редактировать: Для Firefox теперь требуется дополнительная настройка свойства - border-style: solid (см. CSS - В новом релизе Firefox больше не отображается Border-Image )

Answer 2

Хорошее решение: совместимость с Chrome и Firefox:

http://jsfiddle.net/Yas34/954/

отсутствует border-style: solid к текущему «хорошему ответу»

Answer 3

Для одного ваш URL является поддельным (..изображения?).На секунду вы проверили, поддерживает ли ваш браузер это свойство?последний раз я проверял, что было не так давно, никто не поддерживал его (ну, может быть, ночные еженедельники с webkit).