Question

当我想在CSS3中创建渐变背景时，我必须这样做：

background-color: #3584ba;
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */
background-image:    -moz-linear-gradient(top, #54a0ce, #3584ba);  /* FF3.6 */
background-image:      -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */

这真的很烦人。有没有更好的解决方案，例如jQuery插件，如果我只是使用，它将使我的代码跨浏览器兼容：

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */

例如？是否有工具可以帮助我更轻松地编写CSS3代码？

Answer 1

有很多工具可供选择：

这些通常被称为CSS预处理器。

你最终会写这样的东西，就像一个函数定义（通常称为“mixin”）：

.linear-gradient(@start, @end) {
    background-color: @end;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */
    background-image:    -moz-linear-gradient(top, @start, @end);  /* FF3.6 */
    background-image:      -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */
}

然后申请：

.my-class {
    .linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
    .linear-gradient(#ccc, #aaa);
}

强烈推荐。

Answer 2

您可以随时使用在线工具为您生成它们：

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

http://www.css3maker.com/css-gradient.html

Answer 3

是否有更好的解决方案，例如jquery插件，这将使我的代码与浏览器兼容

对于客户端解决方案，您可以使用http://lea.verou.me/prefixfree/

允许您在任何地方仅使用未加前缀的CSS属性的脚本。它在幕后工作，将当前浏览器的前缀添加到任何 CSS代码，仅在需要时才使用。

然后你只需要使用未加前缀的函数，这在你的CSS中神秘地缺失了：

background-image: linear-gradient(top, #54a0ce, #3584ba);

Answer 4

我找到了问题的答案。它是一个名为“autoprefixer”的程序，它是免费的，它使用Grunt（以及其他一些东西）。您使用未编辑的css为其提供文件或目录，并根据您要定位的特定浏览器自动添加前缀，并将它们输出到新文件中。这是一篇关于如何使用它的文章。

作者发表关于Autoprefixer的帖子：http://css-tricks.com/autoprefixer/ 如何使用Grunt作为绝对的初学者：http://24ways.org/2013/grunt-is-not-weird-and-hard/ 然后你可以在Github上查找自述文件。

我正在寻找完全相同的东西，这是我发现只处理常规CSS的最佳解决方案。我希望有所帮助。

Answer 5

https://autoprefixer.github.io/试试这个。这不一定能帮助你编写更简单的代码，它不是一个javascript库。但它确实添加了供应商前缀并删除了无用的css代码。

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba);
background-image: linear-gradient(top, #54a0ce, #3584ba);

将代码放入，这就是我得到的结果。（我从原始代码中删除了-webkit-以获得该结果）。

有没有办法让跨浏览器的CSS3代码干掉？

5 个答案: