如何使用jQuery设置CSS3渐变属性？

Question

我正在编写一个插件，依赖于CSS3渐变背景属性。我没有问题可以让像这样的东西工作：

$(this).css({ '-webkit-box-shadow': 'inset 2px 2px 5px #DEDEDE' });

然而，这种方法无法奏效：

$(this).css({ 'background': '-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#FFFFFF))' });

我之前认为.css()函数可以用于浏览器支持的任何属性，所以我不知道是我在使用jQuery时设置有误还是该属性不被支持？

- theflowersoftime

Answer 1

我怀疑第一个示例也不起作用：如果你想设置CSS属性，你必须使用两个参数，像这样$(this).css('background', '-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#FFFFFF))');​​​​​​​ 更多相关主题：
http://api.jquery.com/css/ 编辑：
你是对的，可以使用{name:value}符号来设置CSS属性，只是函数摘要中没有提到（需要进一步阅读）。
无论如何，这里有一个使用两个参数的可行示例（第二个参数来自你的帖子）：http://jsfiddle.net/BX9Wa/

- Nikita Rybak

---

也可以这样写：$(this).css({ 'background': '-moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(241,250,254) 100%)' }); - theflowersoftime

还可以这样写：$(this).css({ 'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cdbff, endColorstr=#FFFFFF)' }) 和 $(this).css({ '-ms-filter': '\"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4, endColorstr=#FFFFFF)\"' })。哈哈。 - theflowersoftime

这真的很烦人。从摆弄这个来看，似乎你不能混合使用.css（{'someProp'：'someSetting'}）和.css（'someProp'，'someSetting'）。唯一不能与前者一起使用的属性是webkit渐变。即使IE过滤渐变也可以使用该语法！ 除非我再次搞错了什么，我的唯一解决方案就是链式使用大量的.css（'someProp'，'someSetting'），否则无法使用webkit渐变。 - theflowersoftime