无痛css3写作 [英] Painless css3 writing
本文介绍了无痛css3写作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我想在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代码： / p>
这些通常被称为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）;
}
强烈推荐。
When I want to create a gradient background in css3 I have to do this:
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 */
and this is really annoying. Is there a better solution, for example a jquery plugin, that will make my code cross browser compatible, if I just use:
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */
for example? Is there a tool to help me write css3 code more easy?
解决方案
There are many tools for this:
These are generally referred to as CSS Preprocessors.
You would end up writing something like this once, like a function definition (usually called a "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 */
}
Then to apply:
.my-class {
.linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
.linear-gradient(#ccc, #aaa);
}
Highly recommend.
这篇关于无痛css3写作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
