Firefox中的渐变答案

【问题标题】：gradients in firefoxFirefox中的渐变
【发布时间】：2011-03-10 01:18:09
【问题描述】：

我正在尝试在支持渐变的浏览器中制作闪亮的按钮，但在 Firefox 中从未得到我想要的外观。该图像显示了它们在 chrome/safari 中的外观（这是我所追求的），但我无法弄清楚如何在 Firefox 中获得明显的反射线（当然是 3.5+）。

http://karmatics.com/stuff/shiny.png http://karmatics.com/stuff/shinycss3button.html

下面是 webkit 代码（用于渐变），我想完全匹配 Firefox 中的外观。对于 CSS 的其余部分（包括我在 Mozilla 中的糟糕尝试，这对我的口味来说不够光滑），请查看页面上的源代码。

（顺便说一句，如果有人想让它在 IE 中也看起来不错，我会很高兴，但不要屏住呼吸 :)）

编辑：Mozilla 答案现在就在里面（也在上面的链接中）

<style>
div.shiny {
 background-image:
    -webkit-gradient(
        linear, 0% 0%, 0% 100%,
        from(rgba(255,255,255,0.5)),
        to(rgba(255,255,255,0.2)),
        color-stop(.5,rgba(255,255,255,0.3)),
        color-stop(.5,rgba(255,255,255,0.0))
        );
 background-image:
   -moz-linear-gradient (top, 
     rgba(255,255,255,0.5), 
     rgba(255,255,255,0.3) 50%, 
     rgba(0,0,0,0.0) 50%, 
     rgba(255,255,255,0.2));
  }
</style>

【问题讨论】：

标签： html firefox css gradient

【解决方案1】：

对于 Firefox 使用

background: -moz-linear-gradient(90deg, red, white, blue);

或

background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);

您可以添加任意数量的颜色以获得正确的外观。 https://developer.mozilla.org/en/CSS/-moz-linear-gradient

对于 IE，使用过滤器属性

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

在http://jsfiddle.net/gkyg3/1/查看工作示例

【讨论】：

在我的示例中（不可否认，它是从我再也找不到的某个地方复制和更改的）中间有一条尖锐的线。您使用的 -moz 技术似乎对此无济于事......这些颜色总是会顺利融合在一起。有没有办法让中间的锐线让它看起来有光泽？
您需要通过使用多个相同颜色来解决这个问题，例如：background: -moz-linear-gradient(90deg, red,red, red, red, white, blue,blue, blue, blue, blue);。您需要尝试制作自己的组合以实现您想要的外观。这是你用 Firefox 完成它的唯一方法。
好的，你是说色标不能像在 webkit 中那样工作？我以为我只是不知道如何在 moz-land 中正确使用它们。
我找到了。 Firefox 中有一个属性，因此您可以控制渐变应该走多远。 -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
@rob，没错。但是我们可以设置百分比，这将以类似的方式工作。你检查了最后一个例子。 jsfiddle.net/gkyg3/1

【解决方案2】：

您可以从几个网站为 mozilla、webkit 和 IE 生成渐变。

http://www.colorzilla.com/gradient-editor/

http://gradients.glrzad.com/

http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc

rob，建议您在问任何问题之前先进行搜索。这是一个常见问题。

【讨论】：

【解决方案3】：

反射的关键是中心的硬线，您可以使用停止来实现，Mozilla 应该支持：

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

【讨论】：

是的，我想我的问题是我不理解语法，也不理解与“from”和“to”的关系，在搞砸了一段时间后，我无法正确理解它。