CSS渐变按钮

问题描述

我做了一个基于纯 css 的渐变按钮.

但出于某种原因，它在 Firefox 和 chrome 中看起来不同.

我想要它在 FF 中的外观，即从左上角开始的渐变......但在 Chrome 中它从上到下.

<a id="second" href="#"><span>伦敦</span></a>

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

能否请您看一下.先谢谢了.

解决方案

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

jsFiddle 演示

背景:-webkit-gradient(线性，左上，左下，色标(0.05，#BED630)，色标(1，#0DB04B))；背景:-moz-线性渐变(到底部，#BED630 5%，#0DB04B 100%)；

• P.S - 此答案基于您的小提琴代码，但您可能需要添加一些额外的设置，以便跨浏览器.使用标准的 linear-gradient(-moz 前缀在新的 FF 浏览器上是多余的)是您可以进行的一项改进.

---

线性梯度语法

形式语法:linear-gradient([ <角度>|到<边或角>，]?<色标>[, <色标>]+ )\---------------------------------/\-----------------------------/渐变线的定义色标列表其中 <side-or-corner>= [左|对] ||[顶|底部]和<色标>=<颜色>[ <百分比>|<长度>]?

I have made a gradient button based on pure css.

But for some reason it looks different in firefox and chrome.

I want the way it looks in FF that is the gradient starting from left top....but in Chrome it takes from top to bottom.

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

JsFiddle link : http://jsfiddle.net/squidraj/rY94J/1/

Can you please take a look.Thanks in advance.

解决方案

You were using left top, but Mozilla browsers require a slightly different code, as shown in 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 - This answer is based on your fiddle's code, but you may want to add some extra settings so it will be cross-browser. Using the standard linear-gradient (-moz prefix is redundant on new FF browsers) is one improvement you can make.

---

linear-gradient Syntax

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

这篇关于CSS渐变按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！