项目进行中的小问题-0426

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

 border-radius:5px

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

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

语法:

border-radiusnone | <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. 值不允许是负值。
引擎类型GeckoWebkitPresto
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 ExplorerFirefoxChromeOperaSafari
版本 (×)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      
posted @ 2013-04-26 21:19  马小白  阅读(217)  评论(0编辑  收藏  举报