时光飞逝,岁月如歌,转眼间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、未来不同浏览器显示差异的细节或将越来越多