本文介绍了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.
背景:-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.
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渐变按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!