线性渐变语法

Question

我制作了一个基于纯CSS的渐变按钮。

但由于某种原因，它在firefox和chrome中看起来有所不同。

我希望它在FF中的样子是从左上角开始的渐变....但在Chrome中它从上到下。

<div id="foo2_pag" class="pagination" style="display: block;">  <a id="second" href="#"><span>London</span></a> 
</div>

JsFiddle链接：http://jsfiddle.net/squidraj/rY94J/1/

请你看一下。谢谢。

Answer 1

您使用的是left top，但Mozilla浏览器需要稍微不同的代码，如linear-gradient - CSS | MDN所示。

jsFiddle Demo

background:-webkit-gradient( linear,
                             left top, left bottom,
                             color-stop(0.05, #BED630), color-stop(1, #0DB04B) );
background:-moz-linear-gradient( to bottom, #BED630 5%, #0DB04B 100% );

P.S - 这个答案基于你的小提琴代码，但你可能想要添加一些额外的设置，以便它是跨浏览器的。在新的FF浏览器上使用标准linear-gradient（-moz前缀是多余的）是您可以做出的一项改进。

线性渐变语法

Formal grammar: linear-gradient(  
   [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
   \---------------------------------/ \----------------------------/
     Definition of the gradient line         List of color stops  

        where <side-or-corner> = [left | right] || [top | bottom]
           and <color-stop>     = <color> [ <percentage> | <length> ]?

Answer 2

您可以设置标准线性渐变样式：

background:linear-gradient( 180deg, #BED630, #0DB04B );

Answer 3

将此用于跨浏览器渐变

/* For WebKit (Safari, Google Chrome etc) */
background:-webkit-gradient(linear, left top, left bottom, from(#eab730), to(#db5500));
/* For Mozilla/Gecko (Firefox etc) */
background:-moz-linear-gradient(top, #eab730, #db5500);
/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500);
/* For Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500)";

updated jsFiddle file

Answer 4

我强烈推荐ColorZilla上的渐变编辑器。在一个漂亮的WYSIWYG编辑器中创建渐变，它将自动生成跨浏览器兼容的代码，包括IE9的SVG后备（如果需要）。不可或缺的工具IMO。

CSS渐变按钮

4 个答案:

线性渐变语法