Правильный синтаксис градиента границы для Opera и Firefox, у меня синтаксис webkit работает нормально

http://jsfiddle.net/nicktheandroid/Fazsh/1/

Следующее создает градиентную границу, этот синтаксис работает для webkit, но этот синтаксис не работает для Opera и Firefox. Каков правильный синтаксис для Opera и Firefox?

-webkit-border-image: -webkit-linear-gradient(red, rgba(0, 0, 0, 0), blue) 1 100%;
-o-border-image:-o-linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:-moz-linear-gradient(red, rgba(0, 0, 0, 0), blue) 1 100%;

gradient css border firefox opera
person android.nick    schedule 16.10.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Для Mozilla градиенты границ поддерживаются следующим образом:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Opera может поддерживать его как

border-image: linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;'

Но я не уверен.

person Kyle    schedule 16.10.2011
comment
Аууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу как,, как у Mozilla Border Gradient нет сокращения? Это слабо. Спасибо большое. - person android.nick; 17.10.2011

arrow_upward
0
arrow_downward

Что касается Opera, то синтаксис у вас пока правильный.

Opera имеет только частичную поддержку border-image (с префиксом -o-). Поддержка градиентов в качестве изображений границ недоступна до Opera 12, которая все еще находится в альфа-версии.

person webinista    schedule 26.10.2011