IE到目前为止(IE8)直接CSS实现圆角样式是不行的,再怎么也需要手工拼凑出来一个圆角。FF和Safari各自定义了私有属性,可以实现圆角。Chrome更胜一筹,直接支持了CSS3里面的圆角定义,不过它还是支持Safari(webkit)的圆角定义的,同时在开发人员工具里将其转换为标准的CSS3定义呈现。以下是CSS圆角样式写法,注释部分仅Chrome支持。Opera跟IE一样落后,仍然不支持圆角,飘过。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#radius{ /*border-radius:15px; border-bottom-left-radius: 7px 7px; border-bottom-right-radius: 7px 7px; border-top-left-radius: 7px 7px; border-top-right-radius: 7px 7px;*/ -webkit-border-radius:7px; -moz-border-radius:7px; width:300px; height:200px; margin:0 auto; border: 1px solid #dedede; } |
前端开发人员是比较懒的群体,所以才会支持标准,希望某个效果最好有个简单的实现,不用复杂的拼凑代码。主要原因或许是不懂编程的缘故,其实微软的不支持标准是有理由的,这不就在锻炼前端人员的写代码能力么,应该感谢一下微软的良苦用心。
-EOF-