推荐几款提高CSS3编写效率的实用工具

作者:课课家教育更新于： 2016-10-09 17:03:51

　　css3的诞生无疑能为网页设计添加更多时尚的动感和特效元素，实乃web设计师的一大福利。然而小编发现不少朋友对CSS3仍然又爱又恨，忽略IE兼容的问题不说，编写CSS3代码就是件很痛苦的事情，不仅要通过代码脑补各种效果，而且还要给不同浏览器加各种前缀，编写起来可不是一般的蛋疼啊。

　　那么，有没有什么软件可以像photoshop那样，通过绘图工具或者设置面板制作并预览效果，最后导出为CSS3代码呢？或者有没有什么办法，简化诸如圆角半径等属性的编写呢？

　　Photoshop这么强大的绘图软件都有人做出来了，你说生成CSS3代码的可视化工具能没有吗？所以小编就整理出了几款简化CSS3开发流程的可视化工具。

　　1.CSS3 PIE

　　听这名字，小编第一反应还以为是制作CSS3饼图的软件。实际上一看软件就知道，PIE其实应该分成P和IE来理解，它的最大用处就是生成兼容IE的代码。这下，为兼容IE苦恼的朋友就不用愁了。

　　2.CSS3 Builder

　　软件界面跟Photoshop的图层样式面板很像，熟悉Photoshop的朋友相信很快就能上手。但哪怕你不懂Photoshop，在界面上随便点几下，估计也都基本明白了。

　　软件包含了投影，圆角等参数的设置，这样一来，多个前缀的兼容代码就可以一键生成了，无需再手动去逐个敲，非常方便。

　　3.CSS3 Drop Shadow Generator

　　跟CSS3 Builder相比，这款工具更专一，它就只做阴影，所以投影方面的参数设置更完善，也可以做出更多更细腻的阴影效果来。

　　4.border-radius.com

　　说白了就是生成圆角代码用的，技术含量不高。但是现在的网站，哪怕是扁平化都喜欢多少带点圆角（不然可能感觉太尖锐，用户看着不舒服），所以应用还是非常广泛，加上这是个网站，所以无需下载客户端，随时随地都可以登上去一键生成圆角代码。对于大量使用圆角的网站来说，border-radius.com能大幅提高Web设计师的工作效率。

　　5.Button Maker

　　小编曾经整理过不少纯CSS3绘制不同风格按钮的教程，但是用代码绘图真的太枯燥了（代码狂人不在讨论范围内），而且调试也不方便。不得不说，这款ButtonMaker真心是大家的救星啊。弹指一挥间，各种漂亮的按钮尽收眼底。

　　6.CSS3 Gradient Generator

　　渐变也需要根据浏览器编写不同的代码，而且不同浏览器的区别不仅仅是前缀那么简单，所以这样的一款工具在需要制作渐变的时候绝对可以帮助我们节省不少时间，渐变点越多，渐变方式越复杂，这款软件体现出来的优势就越明显。

　　7.CSS3 Generator

　　功能跟CSS3Builder有点像，但是它更简洁，如果觉得CSS3Builder太复杂，看不过来的话，那这款软件大概就适合你了。

　　8.CSS3 & HTML5 Support

　　这不是一款工具，却是一本很实用的“工具书”，里面列出了各大主流浏览器对CSS3和HTML5新功能的支持情况，啥时候忘了都可以登上来查阅一下。    

　　9.CasCADer

　　很多人编码的时候，为方便测试局部样式，都可能用内联样式来书写，那么，如果要整理代码的话，那工程量就相当浩大了。虽然都不推荐写内联样式，但很多时候为了赶时间，都迫不得已这么做。既然如此，那有人就开发出了这款工具，它允许你输入HTML代码将所有内联的CSS抽取出一份独立的样式表文件。这样的话，以后大家都可以放心写内联样式了。

　　10.CSS3,please

　　该网站存放了各种常用的CSS3代码，同时支持在线预览效果。用户可以把需要用到的代码复制到自己的项目上使用。虽然它不是可视化编辑器，但在局部细节需要调整的时候，复制代码反而有可能更加方便。

　　11.Modernizr

　　这款工具用于检测浏览器是否支持CSS3，跟HTML5 & CSS3 support相比，它更直截了当，直接把当前浏览器对CSS3每一个属性的可用性给显示出来。缺点是无法一次性查看所有浏览器及其各版本的支持情况。

　　12.CSS3 Cheat Sheet

　　尽管可视化工具一大堆，但是要真正把页面调好，CSS3的属性和作用也仍然需要熟记，才能灵活运用。于是，这款工具就帮到我们的忙，它通过图表的方式有效帮助大家对CSS3的属性进行记忆。

　　IT界一直流传着一句话：“好的程序员就是要学会偷懒”，而这些工具则正好迎合了程序员们“偷懒”的需求。其实程序员们并不懒，只是他们认为太多重复性的体力劳动浪费了不少时间（每个样式都要手敲那几行兼容浏览器的代码能不烦么？）。要是能把这些时间都节省下来，用在更有意义的事情上面，那试问还有谁会不愿意去“偷”这个“懒”呢？