CSS圆角样式

IE到目前为止(IE8)直接CSS实现圆角样式是不行的,再怎么也需要手工拼凑出来一个圆角。FF和Safari各自定义了私有属性,可以实现圆角。Chrome更胜一筹,直接支持了CSS3里面的圆角定义,不过它还是支持Safari(webkit)的圆角定义的,同时在开发人员工具里将其转换为标准的CSS3定义呈现。以下是CSS圆角样式写法,注释部分仅Chrome支持。Opera跟IE一样落后,仍然不支持圆角,飘过。

#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-

发表评论

电子邮件地址不会被公开。 必填项已用*标注