CSS中有-webkit-border-radius

CSS中有-webkit-border-radius

小知识     2009-09-04 15:15    阅读 126    评论 0    

字号：  大    中    小

border-radius：用这个属性能实现圆角边框的效果。
现在只有Mozilla/Firefox     和     Safari     3支持该属性。请看下面的示例代码：
 
   <div     style="     background-color:     #ccc;
             -moz-border-radius:     5px;
-webkit-border-radius:     5px;
border:     1px     solid     #000;
padding:     10px;"     > 
 
 
Mozilla/Firefox     和     Safari     3用户将在这里看到圆角边框
此外，设计者还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在mozilla/firefox和safari中的具体书写格式如下：     
 
-moz-border-radius-topleft     /     -webkit-border-top-left-radius     
-moz-border-radius-topright     /     -webkit-border-top-right-radius     
-moz-border-radius-bottomleft     /     -webkit-border-bottom-left-radius     
-moz-border-radius-bottomright     /     -webkit-border-bottom-right-radius     

                                     
 
Mozilla/Firefox     和Safari     3     中看到的左上圆角
Mozilla/Firefox     和Safari     3     中看到的右上圆角
Mozilla/Firefox     和Safari     3     中看到的左下圆角
Mozilla/Firefox     和Safari     3     中看到的右下圆角