CSS3有用的开发工具
一.PIE
首先去官网下载 css3pie 插件，然后解压插件压缩包得到五个文件，其中有一个名字为 PIE.htc 的文件，这就是让 IE6-8 能够支持部分 CSS3 新特性的插件。将此文件上传至你站点所在的目录，文件路径可以自己设置。另外一个 PIE_uncompressed.htc 文件是未压缩的版本，如果懂得 JavaScript 的开发者还可以自行更改增强。PIE.php 文件是和 http 服务器设置问题导致无法使用 htc 的情况下才会用到，这时将 htc 文件和 PIE.php 文件放置在同一目录下，然后在具体的 CSS 条目下添加以下语句（具体用法参照下文）：
1 |
#roundCorner{ |
2 |
behavior: url(path/to/PIE.php); |
3 |
} |
一般情况下不需要 PIE.php 文件，只需要 PIE.htc 文件即可。
PIE.htc 的使用方法：
假设你已经创建了一个 html 文件，要对其中某个元素创建圆角效果，HTML Code：
1 |
<div id="roundCorner"></div> |
在 CSS 文件中添加如下语句，CSS Code：
1 |
#roundCorner{ |
2 |
height: 100px; |
3 |
width: 60px; |
4 |
border: 1px solid #999; |
5 |
-webkit-border-radius: 10px; |
6 |
-moz-border-radius: 10px; |
7 |
border-radius: 10px; |
8 |
behavior: url(path/to/PIE.htc); |
9 |
} |
上面的代码中，-webkit-border-radius 是用来兼容 Safari 和 Chrome 浏览器，-moz-border-radius 是用来支持 Firefox 浏览器。样式代码中的 behavior:url(path/to/PIE.htc); 是导入的 PIE 插件，该插件的路径应该是之前上传到服务器时所放置的路径。
这样，在 IE6-8 浏览，就能够正确显示 CSS3 的圆角了，这个 PIE 还可以支持其他一些优秀的 CSS3 特征，比如阴影、渐变等，具体信息请参考 官网 以及一些 CSS3 的用法参考。
二.CSSBuilder
http://www.layerstyles.org/builder.html
通过该工具，你可以用类似应用photoshop特效的界面来设计复杂的CSS3 box模型。非常节约时间。
三.
css-drop-shadow
http://www.wordpressthemeshock.com/css-drop-shadow/
通过滑块功能直观的设计阴影。只需复制已被自动创建的CSS代码并粘贴到CSS文件中便可。
四.
border-radius
当前最流行的CSS3属性之一。有助于快速创建圆角box模型并获取适当的CSS3代码。
五.
ButtonMaker
http://css-tricks.com/examples/ButtonMaker/
允许创建出色的按钮。使得CSS3 按钮设计变得非常简便——只需采集颜色，调整半径，获取代码，粘贴代码至CSS文件即可。
六.
css3generator
使用便利，有助于创建最流行的CSS3属性代码，如 @font-face, RGBA, text-shadow, border-radius等代码。
七.
CSS3 Gradient Generator
渐变生成器。只需采集颜色、预览颜色，抓取代码并粘贴代码即可。
八.
css3please
非常有用的可让用户复制并粘贴常见CSS3代码的站点。具有可供现场测试效果的预览区。