CSS3 工具推荐（不断更）

你的名字 2022-02-20 06:19 305阅读 0赞

收集一些实用的CSS工具，不断更新中，请持续关注。

# 一、代码生成工具 #

## 1.CSS Matic ##

![20130514130728682][]

[CSSmatic][]是一个非营利性的 CSS 工具，目前包含4个很有用的工具，分别是：支持各种颜色和透明度的渐变工具，使用渐变工具，您可以创建渐变平滑的色彩变化效果和微妙的透明胶片；边框圆角工具可以帮助你方便的实现需要的圆角效果；噪声纹理可以帮助你创造奇妙的背景图案，能够实时预览结果；盒阴影工具可以控制模糊半径的变化，颜色变化，阴影大小，可以实现你想要的任何效果。

## 2.CSS3 Builder ##

![20130514132925539][]

[css3 builder][]，很不错的很好的CSS3代码生成器，能够比较快速的生成阴影、渐变、圆角的代码。

## 3.CSS3 Generator ##

![20130514133557214][]

超全的 [CSS3代码生成器][CSS3]，更全更强大。

## 4.CSS3 Click Chart ##

![20130514133918645][]

非常好的 [CSS3效果演示][CSS3 1]，提供了示例代码。

## 5.CSS3 Button Maker ##

![20130514134301300][]

一个非常不错的 [CSS3按钮制作工具][CSS3 2]。

## 6.CSS3 Transforms ##

![20130514134510306][]

一款强大的CSS3 [旋转动画效果演示工具][Link 1]，即时生成代码。

## 7.CSS3 Preview ##

![20130514134833166][]

[CSS3 preview][]，CSS3特性介绍及效果预览，也可以看看 [css3 files][]。

## 8.CSS3 Playground ##

![20130514135107162][]、

一个css3的圆角、阴影生成工具，可以 [试试][Link 2]。

## 9.Mother Effing Text Shadows ##

![20130514135846811][]

3d文字在线生成工具，不妨 [试一下][Link 3]，可以省去好多麻烦。

## 10.CSS3 Maker ##

![20130514140201036][]

很棒的CSS3代码生成工具，包括圆角、渐变、变形、动画、过渡、文字阴影、盒子阴影、嵌入字体等。 [试一下][Link 4]吧，不容错过哟。

## 11.CSS3 PS ##

![20130514143121073][]

内阴影，内阴影，外发光，Ps可以实现的优美效果，CSS3弄出来太太太麻烦？！福音来了，这款[插件][Link 5]可以轻松搞定。

## 12.动画工具Tool ##

![20130514224957658][]  
腾讯ecd开发的CSS3 动画工具CSS3动画手册，着实赞一个。国人的成果[顶顶顶][Link 6]。

## 13.[Enjoy CSS][] ##

一个在线的CSS3编码工具，不容错过。

# 二、兼容工具 #

## 1.CSS3 PIE ##

![20130514131427365][]

众所周知，IE6-9在实现CSS3方面表现差劲，很多热衷于CSS3的童鞋心痛and无奈，现在好了，[CSS3 PIE][]可以通过插件的方式支持ie6-9。试试看吧。

## 2.CSS3 selectors for IE ##

![20130514231551916][]  
[CSS3 selector for IE][]，实际项目中肯定会用到，因为我们不可能放弃IE。

## 3.PrefixFree ##

![20130514233113813][]

把你从繁杂的浏览器渲染前缀中解救出来，使用[prefixfree][]吧。使用方式非常简单，参见[鑫空间][Link 7]。

## 4.Browser Support ##

![20130515052705891][]

如果你需要查看不同浏览器下CSS的兼容性的话，[这个工具][Link 8]肯定能帮你大忙，特别如果你想在你的项目中使用CSS3的话，这个工具肯定也是你不错的选择。

## 5. Can I Use ##

说到html5和css3的兼容性检查，[Can I Use][]肯定不容错过。

持续更新中……

[20130514130728682]: /images/20220220/c0c5e0ad947c44a1aed4637758c0d499.png
[CSSmatic]: http://www.cssmatic.com/
[20130514132925539]: /images/20220220/55125fb02c45431bb7d4635b602d8d47.png
[css3 builder]: http://www.layerstyles.org/builder.html
[20130514133557214]: /images/20220220/4d4dcbd4c12e415f904a7f2276189587.png
[CSS3]: http://css3generator.com/
[20130514133918645]: /images/20220220/00749cbbbfd34e1cb722c5f2435966ab.png
[CSS3 1]: http://www.impressivewebs.com/css3-click-chart/
[20130514134301300]: /images/20220220/3ee92aea1e97498aa74bfe99871328d0.png
[CSS3 2]: http://css-tricks.com/css3-button-maker/
[20130514134510306]: /images/20220220/f09a3692e7a84421b256c897d99fb4f7.png
[Link 1]: http://westciv.com/tools/transforms/index.html
[20130514134833166]: /images/20220220/cca8057488314c19b522677f2e250603.png
[CSS3 preview]: http://www.css3.info/preview/
[css3 files]: http://www.css3files.com/
[20130514135107162]: /images/20220220/1166f621aa834c4c96086c9cbd3652a4.png
[Link 2]: http://css3.mikeplate.com/
[20130514135846811]: /images/20220220/f3e0e1f7eb914497b73cefbad8325a9e.png
[Link 3]: http://mothereffingtextshadow.com/
[20130514140201036]: /images/20220220/777bd09aaf794200b3c3be525497643f.png
[Link 4]: http://www.css3maker.com/index.html
[20130514143121073]: /images/20220220/5d2e0335947a4231880bf1de1142b31a.png
[Link 5]: http://css3ps.com/
[20130514224957658]: /images/20220220/9423e0b7e1e74daaa32727bdf5ef47dd.png
[Link 6]: http://ecd.tencent.com/css3/tools.html
[Enjoy CSS]: http://enjoycss.com/
[20130514131427365]: /images/20220220/dedd846c6b22462ea22bab1d591410ea.png
[CSS3 PIE]: http://css3pie.com/
[20130514231551916]: /images/20220220/a296b38c9b644ec591da89b0549b1a54.png
[CSS3 selector for IE]: http://selectivizr.com/
[20130514233113813]: /images/20220220/d55f2f2f26ea4c30ba1bc1fb64a322ca.png
[prefixfree]: http://leaverou.github.io/prefixfree/
[Link 7]: http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/
[20130515052705891]: /images/20220220/a8bcfac50ff54d7eae3706506af1b50c.png
[Link 8]: http://www.browsersupport.net/
[Can I Use]: http://caniuse.com/