IE8正式版的发布只是证明了IE家族里又出了一个鸡肋。身为浏览器大家庭里占一定比重的一员,居然对CSS3还是我行我素的不支持,似乎MS已经不再在乎其浏览器市场份额逐年下跌了。
WordPress的2.8正式版的后台更漂亮点了,用户交互更亲和,虽然在2.7的基础上视觉效果改变不多,升级后突然心血来潮的去IE下看了看效果,发现IE下还是比较难看,虽然还是实现了按钮等rollover的渐变背景效果,但是圆角就彻底被放弃了,IE下效果就是方方正正的一个个模块。想想也许这也不失是一个解决办法──与其花费大把的时间去让不听话的IE漂亮一点,还不如对IE的界面采取另一种相似的设计,丑是丑了点,但是引用我们单位Dave当时说过的一句话 “People who choose IE does not deserve better design. ”
言归正传,本篇的重点是总结一下在各浏览器下圆角的实现方法。现在许多乖浏览器如Firefox, Safari, Opera已经支持CSS3中的某些语句,特别是border-radius这一创造圆句的功能,太赞了,一句CSS代码就解决了头疼的问题,使用方法如下:
CSS3 (not yet finalised)
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius
Mozilla equivalent
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius
WebKit equivalent
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius
-webkit-border-radius
Opera and KHTML browsers
-opera-border-radius
-khtml-border-radius
由于IE家没有支持CSS3的,所以对于IE下的圆角要另外花功夫。主要用了CSS和png图片及container的嵌套(对IE6,由于其不支持png,各种hacker对png背景图片的处理也不是太理想,于是特别创建了一堆gif图片,不胜其烦),总结了一下代码如下:
(暂时不总结了,下回用到再说吧)
———
Reference: http://www.the-art-of-web.com/css/border-radius/




[...] http://onezhou.com/2009/06/css3-rounded-corner/ [...]
[...] http://onezhou.com/2009/06/css3-rounded-corner/ [...]