项目进行中的小问题-0426

今天发现了新大陆，css居然可以画圆角的边框，我以前一直以为圆角按钮必须用图片，或者一大堆css才能实现，今天在网上无意中看到有人这样教别人：

 border-radius:5px

我试了一下，在IE9下，按钮的边框果然出现了小小的圆角！不知道在其他浏览器里效果如何，待测。

补充一下border-radius的相关知识：

语法：

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值：

<length>：

由浮点数字和单位标识符组成的长度值。不可为负值。

border-top-left-radius：

由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

1. 第一个值是水平半径。
2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
4. 值不允许是负值。

引擎类型	Gecko	Webkit	Presto
Border-radius	-moz-border-radius	-webkit-border-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius

兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(×)Opera 9.64	(√)Safari 3.1
	(×)IE7	(√)Firefox 3.0	(√)Chrome 2.0.x
	(×)IE8	(√)Firefox 3.5

转载于:https://www.cnblogs.com/malijie/archive/2013/04/26/3045835.html