CSS3 Border Images

Question

Я пытаюсь добиться 5px градиента по всем краям. Я нашел несколько способов сделать это во всех браузерах, кроме IE (-mos-border-colors и применить 5 отдельных цветов, border-image и т. Д.).

Я пробовал CSS3 Pie, но не могу заставить его работать вообще в IE (любая версия). Есть несколько размеров для этого столбца, поэтому изображения будут хлопот.

У кого-нибудь есть для этого решения?

    .col {
        border: 5px solid;
        -moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
        -webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
        border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
        behavior: url(/htc/Support/assets/css/PIE.htc);
    }

Answer 1

csspie не может разрешить относительные пути из вашей таблицы стилей к вашим изображениям. Если вы не укажете абсолютные пути от корня документа к изображениям, css pie не сможет их найти.

Смотрите эту проблему здесь: http://css3pie.com/documentation/known-issues/#relative-paths

Answer 2

Некоторые кросс-браузерные решения: http://webdesignerwall.com/tutorials/cross-browser-css-gradient

Обратите внимание, что не все браузеры поддерживают CSS-градиент. Чтобы быть в безопасности, вы не должны полагаться на CSS-градиент при кодировании макета. Его следует использовать только для улучшения макета.

Answer 3

Я пробовал CSS3 Pie, но не могу заставить его работать вообще в IE (любая версия).

CSS3-Pie немного сложно.Попробуйте добавить position:relative; к элементу, к которому вы хотите применить изображение границы.

Answer 4

Может быть box-shadow - это вариант для вас, включающий монохромные градиенты / оттенки ...

header {
    box-shadow: 0 1em 2em #fff;
    -webkit-box-shadow: 0 1em 2em #fff;
    -moz-box-shadow: 0 1em 2em #fff; }

Действительно ли он должен выглядеть одинаково в каждом браузере?