0

我做了一个基于纯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/

你能看看吗。提前谢谢。

4

5 回答 5

4

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

jsFiddle 演示

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% );
  • PS - 此答案基于您的小提琴代码，但您可能需要添加一些额外的设置，以便它可以跨浏览器。使用标准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> ]?
于 2013-09-03T10:44:19.347 回答
1

将此用于跨浏览器渐变

/* 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)";

更新了 jsFiddle 文件

于 2013-09-03T10:51:59.380 回答
1

我强烈推荐ColorZilla上的渐变编辑器。在一个漂亮的 WYSIWYG 编辑器中创建你的渐变，它会自动生成跨浏览器兼容的代码，如果你愿意的话，包括 IE9 的 SVG 回退。不可或缺的工具 IMO。

于 2013-09-03T11:08:30.597 回答
1

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

background:linear-gradient( 180deg, #BED630, #0DB04B );
于 2013-09-03T10:44:49.070 回答
0

这是渐变圆形按钮的工作跨浏览器示例，可能会对某人有所帮助：

bootply 上的 css 和 html

HTML

<div class="container">
  <h1 class="text-center">Big beautifull gradient button</h1>
    <button type="button" class="gradient btn-lg bigrounded btn-block blue xxl">Click Me</button>
</div>

CSS

.gradient {
   display: inline-block;
   vertical-align: baseline;
   margin: 0 2px;
   outline: none;
   text-align: center;
   text-decoration: none;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em; 
   -moz-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.bigrounded {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.blue {
  color: #d9eef7;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
  background: #007ead;
  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
  background: -moz-linear-gradient(top,  #0095cc,  #00678e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
  color: #80bed6;
  background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
  background: -moz-linear-gradient(top,  #0078a5,  #00adee);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.xxl{
  font-size:50px;
  padding:15px;
}
于 2015-08-16T11:30:56.807 回答