CSS3绘制对话框

我们之前有利用css3做过一个投影效果:纯css打造投影效果——CSS3属性transform的应用
主要是利用了transforms系列属性。
另外,在这篇文章里:CSS3的崛起——体验webkit的3D-Effect
我们还讨论了目前仍属于webkit独有的3d-transforms属性。

今天这个效果的实现还是用到了transform(之中的skew)。

看代码:

 

上面的代码中,我们可以看见有一句ie的滤镜注释,那是ie的阴影滤镜。
其实ie在很早的时候就开始以滤镜的形式支持各种变形和阴影了,所以如果你想让ie(9以下)浏览器也能展现css3的那些效果,你也可以考虑滤镜实现。
并且,有人已经帮你实现智能转换了。非常轻松,看这里:http://www.useragentman.com/IETransformsTranslator/

而如果你不屑于ie的滤镜,认为那是即将被淘汰的事物了,那不妨看看3d-transforms以及Animation属性这种目前只有webkit支持的,未来或许能进入css3标准的东西。
http://westciv.com/tools/transforms/index.html (除一般的transforms的演示外,还有3d-transforms和Animation的演示)。

最后,提醒一句,transform属性并非css3独有,svg,canvas中也都有实现,当然他们的写法非常类似。
下面是一个canvas中的transform属性可视化演示:http://www.cssass.com/blog/index.php/2010/817.html