html - CSS 渐变按钮

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 - 这个答案是基于你的 fiddle 代码，但你可能想添加一些额外的设置，这样它就可以跨浏览器了。使用标准的 linear-gradient(-moz 前缀在新的 FF 浏览器上是多余的)是您可以做出的一项改进。

---

线性渐变语法

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> ]?