css - Opera 和 Firefox 的正确边框渐变语法,我的 webkit 语法工作正常

标签 css firefox border opera gradient

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

最佳答案

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

但我不确定。

关于css - Opera 和 Firefox 的正确边框渐变语法,我的 webkit 语法工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7783061/

相关文章:

php - mPDF 6.0 自定义进度条问题

javascript - 将自定义图标添加到选择菜单

html - 禁用悬停时出现链接

javascript - WebGL 纹理创建麻烦

javascript - 如何在 Firefox 运行时访问 JavaScript 执行跟踪?

firefox - WebRTC:Firefox 中缺少中继候选者

javascript - IE8 网站不断进入 Quirk 模式,页面中添加了 JS

wpf - Canvas 子项和 Canvas 边框重叠

html - 在黑色父边框上设置透明背景色 div

css - IE11 中不显示 Circle Boarder