CSS3有用的开发工具

一.PIE

http://css3pie.com

首先去官网下载 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

http://border-radius.com/

当前最流行的CSS3属性之一。有助于快速创建圆角box模型并获取适当的CSS3代码。 

 

五.

ButtonMaker

http://css-tricks.com/examples/ButtonMaker/

允许创建出色的按钮。使得CSS3 按钮设计变得非常简便——只需采集颜色，调整半径，获取代码，粘贴代码至CSS文件即可。

 

六.

css3generator

http://css3generator.com/

使用便利，有助于创建最流行的CSS3属性代码，如 @font-face, RGBA, text-shadow, border-radius等代码。 

 

七.

CSS3 Gradient Generator

http://gradients.glrzad.com/

渐变生成器。只需采集颜色、预览颜色，抓取代码并粘贴代码即可。 

 

八.

css3please

http://css3please.com/

 

非常有用的可让用户复制并粘贴常见CSS3代码的站点。具有可供现场测试效果的预览区。