换肤&CSS3使用小记

时光飞逝，岁月如歌，转眼间CSS3的时代就要到来了，同学们都摩拳擦掌，跃跃欲试一试CSS3的神奇，像哥这样的懒人今天也下了套支持CSS3的皮肤搞搞高科技。话说这一搞不要紧，一搞之下哥的人生观+世界观都为之一颤，为什么一颤呢，原来哥发现这个世界原来真的是圆角比较美，难怪 Apple 的设计如此美观，正是因为乔大爷对世界万物的认真观察啊！！！

【硅谷革命】18. 到处都是圆角矩形
史蒂夫突然变得很激动，「带圆角的长方形哪儿都是！你看看这个屋子里面。」当然，这样的例子随处可见，比如白板，桌子和椅子。他又指着窗外说：「你再看看外面，外面更多，哪儿都是！」他甚至说服比尔跟他一起出去在楼附近走一圈，一个个地指给他看圆角矩形的物体。
二人路过一个带着圆角的禁止停车标志时，史蒂夫终于达到目的了。「好啦，我投降。」比尔乞求道，「我去看看是不是我想象的那么难吧。」然后他就回家研究去了。

搞CSS3当然是用咱的懒人搞法，直接找套支持CSS3的WP皮肤来用就成了，然后就可以对外宣布，哥已经掌握CSS3啦，哈哈哈哈~~~当然，咱也不能太懒，还是要看看哪里有不足，改一改，这一改不要紧，一改之咱对CSS3的掌握又是更进了一层，事情是这样滴：

我下了的 zBench 这套皮肤，结果发现和我用的代码插件WP-Syntax有点冲突，所以就去改CSS，当然zBench这套皮肤的CSS写的很不错，起马从CODE格式上就可以看来，层次分明，主题突出。所以我就越改越开心，顺手把WP-Syntax的字体改成Courier New，这个字体也是彪悍的字体啊，写CODE全就看它了。改完之后谷歌扣肉5.0浏览器一看，乖乖，真是一个美啊，然后手就更痒了，CSS3 Transition咱也加上，当然我也不忘记在Twitter上吹嘘一番，结果 肉饼 看了一下，告诉我 safari 有几个圆角没显示出来，乖乖，这就奇了怪了，乔大爷可是圆角矩形的发现者+导师，他老人家搞的 safari 不支持圆角，这可就说不过去了，结果就去细看 zBench 皮肤的CSS，结果问题找到了：

Safari这个SB浏览器，不认 -webkit-border-radius:6px 6px 0 0; 这样的缩写，非要写成 -webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;

当然 zBench 皮肤的作者也有点马大哈的编辑器有问题，要么忘记写-moz- -webkit-，要么把 -webkit- 拼成 -webkitz-，等我一一改过之后，CSS3的掌握就又精进了一层，虚拟世界通过圆角矩形又向现实世界进了一大步。最后再总结一下

1、Safari 4.0 不支持border-radius四个角缩写，支持 border-top-left-radius 写法
2、Chrome5.0 支持 border-radius 的写法（-webkit- 拼成 -webkitz- 竟然能正常显示得出）
3、Firefox3.6.3 不支持transform中时间的设定
4、IE8 就是一大SB，什么也不支持
5、未来不同浏览器显示差异的细节或将越来越多