CSS3属性之圆角效果--border-radius属性_html/css_WEB-ITnose

在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。

CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。

-webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius 

　border-radius属性其实可以分为四个其他的属性：

border-radius-top-left         /*左上角*/border-radius-top-right       /*右上角*/border-radius-bottom-right /*右下角*/border-radius-bottom-left   /*左下角*///提示：按顺时针方式 

下面用几个实例来展示border-radius的具体用法。

1、border-radius单个属性值：

//HTML清单
 

.roundedCorner{    width:100px;    height:100px;    background-color:#f90;    border-radius:10px;//左上，右上，右下，坐下都是10px} 

效果：

　　

2、border-radius是个属性值方式：

      
查看更多关于CSS3属性之圆角效果--border-radius属性_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107503