Opera 和 Firefox 的正确边框渐变语法，我的 webkit 语法工作正常答案

【问题标题】：Proper border gradient syntax for Opera and Firefox, I have the webkit syntax working fineOpera 和 Firefox 的正确边框渐变语法，我的 webkit 语法工作正常
【发布时间】：2011-10-16 08:02:46
【问题描述】：

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%;

【问题讨论】：

标签： css firefox border opera gradient

【解决方案1】：

对于 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%;'

但我不确定。

【讨论】：

Awww，Mozilla 的边框渐变没有简写吗？那是虚弱的。非常感谢。

【解决方案2】：

关于 Opera，您现在使用的语法是正确的。

Opera 仅部分支持边框图像（带有 -o- 前缀）。直到 Opera 12（仍然是 alpha 版本）才支持渐变作为边框图像。

【讨论】：