Proper border gradient syntax for Opera and Firefox, I have the webkit syntax working fine
http://jsfiddle.net/nicktheandroid/Fazsh/1/
The following creates a gradient border, this syntax is working for webkit, but this syntax is not working for Opera and Firefox. What is the proper syntax for Opera and 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-ima开发者_如何学Pythonge:-moz-linear-gradient(red, rgba(0, 0, 0, 0), blue) 1 100%;
For Mozilla, border gradients are supported in this way:
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 might support it as
border-image: linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;'
But I am not sure.
With regard to Opera, the syntax you have is the right one for now.
Opera only has partial support for border-image (with the -o- prefix). Support for gradients as border images isn't available until Opera 12, which is still an alpha release.
精彩评论