jquery css3渐变插件答案

【问题标题】：jquery css3 gradient pluginjquery css3渐变插件
【发布时间】：2010-07-26 14:14:07
【问题描述】：

有谁知道支持跨浏览器渐变的 jquery css3 插件。到目前为止，我看到的所有渐变插件都是基于创建许多元素。

谢谢。

编辑：抱歉不清楚，我不想让 CSS3 在不支持它的浏览器上工作。我知道我可以在支持 CSS3 渐变的浏览器上使用渐变，并使用 IE 过滤器。我正在尝试看看是否有人已经编写了一个 jQuery 插件，以便我可以在代码中完成它。

例如，jquery 核心标准化elem.css('opacity', '.5')，以便它可以跨浏览器工作，而不管语法如何。也在为渐变寻找类似的东西。

但如果它不存在，我想我会自己写。

【问题讨论】：

CSS3 支持渐变，你不需要 jQuery 插件。问题是并非所有浏览器都实现 CSS3。
@RaYell，我想在 js 中做类似：elem.css(gradient(#000).to(#fff)); 之类的事情，而不必手动手动写出所有 CSS，这很烦人。

标签： jquery css gradient

【解决方案1】：

Mmmmm, pie.

CSS3PIE - Progressive Internet Explorer - makes Internet Explorer 6-8 capable
of rendering several of the most useful CSS3 decoration features.

这个.htc 真的很容易实现和使用。

【讨论】：

【解决方案2】：

当您不想使用图像时，创建大量元素是获得跨浏览器渐变的唯一方法 - 而 jquery 无法动态创建图像。使用其中一个（不好的？）插件或简单地使用 Photoshop（或 gimp（或油漆））来创建渐变。

我最喜欢的是：支持漂亮的现代浏览器（新的 safari / firefox 版本，Internet Explorer）的渐变，并使用正常的背景颜色作为坏浏览器（旧的 safari / firefox 版本）的后备

注意：在这种情况下，IE 是很好的浏览器之一，它 supports 渐变，因为...我一直记得

【讨论】：

【解决方案3】：

不是专门的 jQuery，而是使用 Raphael（javascript 图形库）可以设置跨浏览器渐变。查看http://raphaeljs.com/reference.html#attr下的设置。

注意：这是一个矢量图库实现，它根据浏览器使用各种技术来实现其效果。

【讨论】：

【解决方案4】：

创建渐变的唯一跨浏览器方法是创建具有不断变化的背景颜色的元素。支持 moz、webkit 和 IE 浏览器，有 3 条规则（每个渐变）：

/* IE */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff00,endColorstr=#00000000);
/* webkit(Safari, Chrome) */
-webkit-gradient(linear,left bottom,right bottom,color-stop(1, rgb(0,0,0)),color-stop(0, rgb(255,255,255)));
/* mozilla(Firefox) */
-moz-linear-gradient(left center,rgb(0,0,0) 100%,rgb(255,255,255) 0%);

然后你可以有一个正常背景颜色的后备。

【讨论】：

【解决方案5】：

如果您发现编写 CSS3 渐变代码很困难，您可以尝试 CSS3 渐变生成器。您可以找到渐变列表here。

【讨论】：

【解决方案6】：

今天你使用 cssHooks 做 jquery 渐变跨浏览器。

【讨论】：