1

我正在向按钮添加 css3 渐变。我认为 jQuery 将我所有的跨浏览器“背景图像”声明组合为一个声明（它找到的最后一个“背景图像”）。有没有更好的方法来编写 jQuery，以便它像往常一样向浏览器呈现所有跨浏览器 css？

这是我的 jQuery：

        $('.button').css({
        'background-color' : FromGradientColor ,
        'background-image' : '-webkit-gradient(linear, 0% 0%, 0% 100%, from('+ FromGradientColor +'), to('+ ToGradientColor +'))' ,
        'background-image' : '-webkit-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-moz-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-ms-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-o-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' 
    });

这就是我希望 jQuery 呈现给浏览器的内容（由我在 jQuery 中的变量确定的颜色除外）：

background-color: #ddd;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
text-shadow: 0 1px 0 rgba(255,255,255,.8);
4

1 回答 1

1

将样式放入一个类中，例如这个较少的示例：

@bgcolor: #ddd;

.gradient(@from: #eee, @to: #ccc) 
  {
  background-color: @bgcolor; 
  background-image: -webkit-linear-gradient(top, @from, @to); 
  background-image: -moz-linear-gradient(top, @from, @to); 
  background-image: -ms-linear-gradient(top, @from, @to); 
  background-image: -o-linear-gradient(top, @from, @to); 
  filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=@{from}, endColorstr=@{to})"; 
  -ms-filter: "'progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=@{from}, endColorstr=@{to})'"; 
  }

然后像这样引用它：

$('.button').addClass("gradient")
于 2013-02-27T22:11:36.837 回答